fix: rest MUI components - Introduced ForwardRef (#224)

* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors

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

@@ -2,6 +2,6 @@
 
 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 MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z 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>"`;
+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-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><button class=\\"MuiButtonBase-root MuiFab-root css-z6z5me 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>"`;
 
-exports[`<ActionBar /> component when there is a button to open an issue 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root MuiFab-root css-96oxa0 eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><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><span class=\\"MuiTouchRipple-root\\"></span></button></a><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<ActionBar /> component when there is a button to open an issue 1`] = `"<ul class=\\"MuiList-root MuiList-padding\\"><div class=\\"MuiButtonBase-root MuiListItem-root css-1br2q5z eux6shq0 MuiListItem-gutters MuiListItem-button MuiListItem-alignItemsFlexStart\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root MuiFab-root css-z6z5me eux6shq1 MuiFab-sizeSmall\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><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><span class=\\"MuiTouchRipple-root\\"></span></button></a><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/ActionBar/styles.ts

@@ -1,8 +1,8 @@
 import styled from 'react-emotion';
-import { default as MuiFab } from '@material-ui/core/Fab';
 
 import colors from '../../utils/styles/colors';
 import ListItem from '../../muiComponents/ListItem';
+import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 
 export const ActionListItem = styled(ListItem)({
   paddingTop: 0,
@@ -10,10 +10,8 @@ export const ActionListItem = styled(ListItem)({
   paddingRight: 0,
 });
 
-export const Fab = styled(MuiFab)({
+export const Fab = styled(FloatingActionButton)({
-  '&&': {
+  backgroundColor: colors.primary,
-    backgroundColor: colors.primary,
+  color: colors.white,
-    color: colors.white,
+  marginRight: '10px',
-    marginRight: '10px',
-  },
 });

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 MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko 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 in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 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-fipixf 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 MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko 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>"`;
+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-b8upko e1xuehjw0 MuiTypography-subtitle1\\">Author</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-zw46c6 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-fipixf e1xuehjw2\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">verdaccio user</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Author/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
+import ListItemText from '../../muiComponents/ListItemText';
 
 export const StyledText = styled(Text)({
   fontWeight: fontWeight.bold,
@@ -11,17 +11,13 @@ export const StyledText = styled(Text)({
 });
 
 export const AuthorListItem = styled(ListItem)({
-  '&&': {
+  padding: 0,
-    padding: 0,
+  ':hover': {
-  },
-  '&&:hover': {
     backgroundColor: 'transparent',
   },
 });
 
 export const AuthorListItemText = styled(ListItemText)({
-  '&&': {
+  padding: '0 10px',
-    padding: '0 10px',
+  margin: 0,
-    margin: 0,
-  },
 });

src/components/AutoComplete/AutoComplete.tsx

@@ -3,9 +3,9 @@ import { css } from 'emotion';
 import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } from 'react-autosuggest';
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
-import MenuItem from '@material-ui/core/MenuItem';
 
 import { fontWeight } from '../../utils/styles/sizes';
+import MenuItem from '../../muiComponents/MenuItem';
 
 import { Wrapper, InputField, SuggestionContainer } from './styles';
 

src/components/AutoComplete/styles.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled, { css } from 'react-emotion';
-import Paper from '@material-ui/core/Paper';
 
 import TextField from '../../muiComponents/TextField';
+import Paper from '../../muiComponents/Paper';
 
 export interface InputFieldProps {
   color: string;

src/components/Dependencies/Dependencies.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
-import CardContent from '@material-ui/core/CardContent';
 
+import CardContent from '../../muiComponents/CardContent';
 import { PackageDependencies } from '../../../types/packageMeta';
 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';

src/components/Dependencies/styles.ts

@@ -1,14 +1,12 @@
 import styled from 'react-emotion';
-import Chip from '@material-ui/core/Chip';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import Card from '../../muiComponents/Card';
+import Chip from '../../muiComponents/Chip';
 
 export const CardWrap = styled(Card)({
-  '&&': {
+  margin: '0 0 16px',
-    margin: '0 0 16px',
-  },
 });
 
 export const StyledText = styled(Text)({
@@ -17,16 +15,12 @@ export const StyledText = styled(Text)({
 });
 
 export const Tags = styled('div')({
-  '&&': {
+  display: 'flex',
-    display: 'flex',
+  justifyContent: 'start',
-    justifyContent: 'start',
+  flexWrap: 'wrap',
-    flexWrap: 'wrap',
+  margin: '0 -5px',
-    margin: '0 -5px',
-  },
 });
 
 export const Tag = styled(Chip)({
-  '&&': {
+  margin: '5px',
-    margin: '5px',
-  },
 });

src/components/DetailContainer/DetailContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useState, ChangeEvent, useContext } from 'react';
-import Box from '@material-ui/core/Box';
 
 import { DetailContext } from '../../pages/Version';
+import Box from '../../muiComponents/Box';
 
 import DetailContainerTabs from './DetailContainerTabs';
 import DetailContainerContent from './DetailContainerContent';

src/components/DetailContainer/DetailContainerTabs.tsx

@@ -1,8 +1,9 @@
 import React, { ChangeEvent, useState, useEffect } from 'react';
-import { default as MuiTabs } from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
 import styled from 'react-emotion';
 
+import { default as MuiTabs } from '../../muiComponents/Tabs';
+import Tab from '../../muiComponents/Tab';
+
 import { TabPosition } from './tabs';
 
 interface Props {

src/components/DetailSidebar/DetailSidebar.tsx

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react';
-import CardContent from '@material-ui/core/CardContent';
 
 import { ActionBar } from '../ActionBar/ActionBar';
 import Author from '../Author';
@@ -11,6 +10,7 @@ import Repository from '../Repository/Repository';
 import { DetailContext } from '../../pages/Version';
 import List from '../../muiComponents/List';
 import Card from '../../muiComponents/Card';
+import CardContent from '../../muiComponents/CardContent';
 
 import { TitleListItem, TitleListItemText, PackageDescription, PackageVersion } from './styles';
 

src/components/DetailSidebar/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'react-emotion';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import ListItem from '../../muiComponents/ListItem';
+import ListItemText from '../../muiComponents/ListItemText';
 
 export const TitleListItem = styled(ListItem)({
   paddingLeft: 0,
@@ -10,21 +10,15 @@ export const TitleListItem = styled(ListItem)({
 });
 
 export const TitleListItemText = styled(ListItemText)({
-  '&&': {
+  paddingLeft: 0,
-    paddingLeft: 0,
+  paddingRight: 0,
-    paddingRight: 0,
+  paddingTop: '8px',
-    paddingTop: '8px',
-  },
 });
 
 export const PackageDescription = styled('span')({
-  '&&': {
+  display: 'block',
-    display: 'block',
-  },
 });
 
 export const PackageVersion = styled('span')({
-  '&&': {
+  display: 'block',
-    display: 'block',
-  },
 });

src/components/Developers/styles.ts

@@ -1,9 +1,9 @@
 import styled from 'react-emotion';
-import { default as MuiFab } from '@material-ui/core/Fab';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
+import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 
 export const Details = styled('span')({
   display: 'flex',
@@ -26,9 +26,7 @@ export const StyledText = styled(Text)({
   textTransform: 'capitalize',
 });
 
-export const Fab = styled(MuiFab)({
+export const Fab = styled(FloatingActionButton)({
-  '&&': {
+  backgroundColor: colors.primary,
-    backgroundColor: colors.primary,
+  color: colors.white,
-    color: colors.white,
-  },
 });

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as object 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
 
-exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-z8a2h0 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-1le6jk6 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;
+exports[`<Dist /> component should render the component with license as string 1`] = `"<ul class=\\"MuiList-root MuiList-padding MuiList-subheader\\"><h6 class=\\"MuiTypography-root css-b8upko estxrtg0 MuiTypography-subtitle1\\">Latest Distribution</h6><div class=\\"MuiButtonBase-root MuiListItem-root css-1huthg8 estxrtg1 MuiListItem-gutters MuiListItem-button\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"false\\"><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>file count</b>: 7</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>size</b>: 10.00 Bytes</span></div><div class=\\"MuiChip-root css-42zb18 estxrtg2\\"><span class=\\"MuiChip-label\\"><b>license</b>: MIT</span></div><span class=\\"MuiTouchRipple-root\\"></span></div></ul>"`;

src/components/Dist/styles.ts

@@ -1,11 +1,11 @@
 import styled from 'react-emotion';
-import { default as MuiFab } from '@material-ui/core/Fab';
-import Chip from '@material-ui/core/Chip';
 
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
+import FloatingActionButton from '../../muiComponents/FloatingActionButton';
+import Chip from '../../muiComponents/Chip';
 
 export const StyledText = styled(Text)({
   fontWeight: fontWeight.bold,
@@ -13,22 +13,16 @@ export const StyledText = styled(Text)({
 });
 
 export const DistListItem = styled(ListItem)({
-  '&&': {
+  paddingLeft: 0,
-    paddingLeft: 0,
+  paddingRight: 0,
-    paddingRight: 0,
-  },
 });
 
 export const DistChips = styled(Chip)({
-  '&&': {
+  marginRight: '5px',
-    marginRight: '5px',
+  textTransform: 'capitalize',
-    textTransform: 'capitalize',
-  },
 });
 
-export const DownloadButton = styled(MuiFab)({
+export const DownloadButton = styled(FloatingActionButton)({
-  '&&': {
+  backgroundColor: colors.primary,
-    backgroundColor: colors.primary,
+  color: colors.white,
-    color: colors.white,
-  },
 });

src/components/Engines/Engines.tsx

@@ -1,11 +1,11 @@
 import React, { Component, ReactElement } from 'react';
-import Grid from '@material-ui/core/Grid';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import { VersionPageConsumerProps, DetailContextConsumer } from '../../pages/Version';
 import Avatar from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
 import npm from '../Install/img/npm.svg';
+import ListItemText from '../../muiComponents/ListItemText';
+import Grid from '../../muiComponents/Grid';
 
 import { StyledText, EngineListItem } from './styles';
 // @ts-ignore

src/components/Header/Header.tsx

@@ -50,7 +50,9 @@ const Header: React.FC<Props> = ({ logo, withoutSearch, username, onLogout, onTo
           <InnerMobileNavBar>
             <Search />
           </InnerMobileNavBar>
-          <Button color="inherit">{'Cancel'}</Button>
+          <Button color="inherit" onClick={() => setShowMobileNavBar(false)}>
+            {'Cancel'}
+          </Button>
         </MobileNavBar>
       )}
     </>

src/components/Header/HeaderMenu.tsx

@@ -1,9 +1,9 @@
 import React, { MouseEvent } from 'react';
-import MenuItem from '@material-ui/core/MenuItem';
-import Menu from '@material-ui/core/Menu';
 import AccountCircle from '@material-ui/icons/AccountCircle';
 
 import IconButton from '../../muiComponents/IconButton';
+import MenuItem from '../../muiComponents/MenuItem';
+import Menu from '../../muiComponents/Menu';
 
 import HeaderGreetings from './HeaderGreetings';
 
@@ -39,7 +39,6 @@ const HeaderMenu: React.FC<Props> = ({
         vertical: 'top',
         horizontal: 'right',
       }}
-      id="header--button-account"
       onClose={onLoggedInMenuClose}
       open={isMenuOpen}
       transformOrigin={{
@@ -49,7 +48,7 @@ const HeaderMenu: React.FC<Props> = ({
       <MenuItem disabled={true}>
         <HeaderGreetings username={username} />
       </MenuItem>
-      <MenuItem id="header--button-logout" onClick={onLogout}>
+      <MenuItem button={true} id="header--button-logout" onClick={onLogout}>
         {'Logout'}
       </MenuItem>
     </Menu>

src/components/Header/HeaderToolTipIcon.tsx

@@ -1,31 +1,37 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import Info from '@material-ui/icons/Info';
 import Help from '@material-ui/icons/Help';
 import Search from '@material-ui/icons/Search';
 
 import IconButton from '../../muiComponents/IconButton';
 
-import { IconSearchButton, StyledExternalLink } from './styles';
+import { IconSearchButton, StyledLink } from './styles';
 
 export type TooltipIconType = 'search' | 'help' | 'info';
-
 interface Props {
   tooltipIconType: TooltipIconType;
   onClick?: () => void;
 }
 
-const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
+type HeaderToolTipIconRef = HTMLButtonElement;
+
+/* eslint-disable react/jsx-no-undef */
+/* eslint-disable react/display-name */
+const HeaderToolTipIcon = forwardRef<HeaderToolTipIconRef, Props>(function HeaderToolTipIcon(
+  { tooltipIconType, onClick },
+  ref
+) {
   switch (tooltipIconType) {
     case 'help':
       return (
-        <StyledExternalLink
+        <StyledLink
-          blank={true}
           data-testid={'header--tooltip-documentation'}
+          external={true}
           to={'https://verdaccio.org/docs/en/installation'}>
           <IconButton color={'inherit'}>
             <Help />
           </IconButton>
-        </StyledExternalLink>
+        </StyledLink>
       );
     case 'info':
       return (
@@ -33,7 +39,8 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
           color="inherit"
           data-testid={'header--tooltip-info'}
           id="header--button-registryInfo"
-          onClick={onClick}>
+          onClick={onClick}
+          ref={ref}>
           <Info />
         </IconButton>
       );
@@ -46,6 +53,6 @@ const HeaderToolTipIcon: React.FC<Props> = ({ tooltipIconType, onClick }) => {
     default:
       return null;
   }
-};
+});
 
 export default HeaderToolTipIcon;

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

@@ -5,10 +5,10 @@ exports[`<Header /> component with logged in state should load the component in
   class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
 >
   <div
-    class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
     >
       <a
         class="css-1dk30lc"
@@ -19,7 +19,7 @@ exports[`<Header /> component with logged in state should load the component in
         />
       </a>
       <div
-        class="css-13zpdre emotion-3"
+        class="css-12prohx emotion-3"
       >
         <div
           class="css-1crzyyo emotion-2"
@@ -40,7 +40,7 @@ exports[`<Header /> component with logged in state should load the component in
                 class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
               >
                 <div
-                  class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
+                  class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
                 >
                   <svg
                     aria-hidden="true"
@@ -74,10 +74,10 @@ exports[`<Header /> component with logged in state should load the component in
       </div>
     </div>
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
     >
       <button
-        class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
+        class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
         tabindex="0"
         type="button"
       >
@@ -101,35 +101,40 @@ exports[`<Header /> component with logged in state should load the component in
         />
       </button>
       <a
-        class="css-1aacqdd emotion-6"
+        class="css-kbn7if emotion-6"
         data-testid="header--tooltip-documentation"
         href="https://verdaccio.org/docs/en/installation"
+        rel="noopener noreferrer"
         target="_blank"
       >
-        <button
+        <h6
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          class="MuiTypography-root MuiTypography-subtitle1"
-          tabindex="0"
-          type="button"
         >
-          <span
+          <button
-            class="MuiIconButton-label"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+            tabindex="0"
+            type="button"
           >
-            <svg
+            <span
-              aria-hidden="true"
+              class="MuiIconButton-label"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
             >
-              <path
+              <svg
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                aria-hidden="true"
-              />
+                class="MuiSvgIcon-root"
-            </svg>
+                focusable="false"
-          </span>
+                role="presentation"
-          <span
+                viewBox="0 0 24 24"
-            class="MuiTouchRipple-root"
+              >
-          />
+                <path
-        </button>
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </h6>
       </a>
       <button
         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
@@ -193,10 +198,10 @@ exports[`<Header /> component with logged in state should load the component in
   class="MuiPaper-root MuiPaper-elevation4 MuiAppBar-root MuiAppBar-positionStatic css-rfunvc emotion-9 MuiAppBar-colorPrimary"
 >
   <div
-    class="MuiToolbar-root MuiToolbar-regular css-1pwdmmq emotion-8 MuiToolbar-gutters"
+    class="MuiToolbar-root MuiToolbar-regular css-1bjere7 emotion-8 MuiToolbar-gutters"
   >
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-1vacr9s emotion-4 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-i5xjw9 emotion-4 MuiToolbar-gutters"
     >
       <a
         class="css-1dk30lc"
@@ -207,7 +212,7 @@ exports[`<Header /> component with logged in state should load the component in
         />
       </a>
       <div
-        class="css-13zpdre emotion-3"
+        class="css-12prohx emotion-3"
       >
         <div
           class="css-1crzyyo emotion-2"
@@ -228,7 +233,7 @@ exports[`<Header /> component with logged in state should load the component in
                 class="MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart"
               >
                 <div
-                  class="MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart"
+                  class="MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart"
                 >
                   <svg
                     aria-hidden="true"
@@ -262,10 +267,10 @@ exports[`<Header /> component with logged in state should load the component in
       </div>
     </div>
     <div
-      class="MuiToolbar-root MuiToolbar-regular css-m61s5i emotion-7 MuiToolbar-gutters"
+      class="MuiToolbar-root MuiToolbar-regular css-1qii1b7 emotion-7 MuiToolbar-gutters"
     >
       <button
-        class="MuiButtonBase-root MuiIconButton-root css-1y1xi9f emotion-5 MuiIconButton-colorInherit"
+        class="MuiButtonBase-root MuiIconButton-root css-13o7eu2 emotion-5 MuiIconButton-colorInherit"
         tabindex="0"
         type="button"
       >
@@ -289,35 +294,40 @@ exports[`<Header /> component with logged in state should load the component in
         />
       </button>
       <a
-        class="css-1aacqdd emotion-6"
+        class="css-kbn7if emotion-6"
         data-testid="header--tooltip-documentation"
         href="https://verdaccio.org/docs/en/installation"
+        rel="noopener noreferrer"
         target="_blank"
       >
-        <button
+        <h6
-          class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+          class="MuiTypography-root MuiTypography-subtitle1"
-          tabindex="0"
-          type="button"
         >
-          <span
+          <button
-            class="MuiIconButton-label"
+            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"
+            tabindex="0"
+            type="button"
           >
-            <svg
+            <span
-              aria-hidden="true"
+              class="MuiIconButton-label"
-              class="MuiSvgIcon-root"
-              focusable="false"
-              role="presentation"
-              viewBox="0 0 24 24"
             >
-              <path
+              <svg
-                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                aria-hidden="true"
-              />
+                class="MuiSvgIcon-root"
-            </svg>
+                focusable="false"
-          </span>
+                role="presentation"
-          <span
+                viewBox="0 0 24 24"
-            class="MuiTouchRipple-root"
+              >
-          />
+                <path
-        </button>
+                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"
+                />
+              </svg>
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </h6>
       </a>
       <button
         class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit"

src/components/Header/styles.ts

@@ -1,72 +1,56 @@
 import styled, { css } from 'react-emotion';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
 
 import colors from '../../utils/styles/colors';
 import mq from '../../utils/styles/media';
 import IconButton from '../../muiComponents/IconButton';
-import ExternalLink from '../Link';
+import AppBar from '../../muiComponents/AppBar';
+import Toolbar from '../../muiComponents/Toolbar';
+import Link from '../Link';
 
 export const InnerNavBar = styled(Toolbar)({
-  '&&': {
+  justifyContent: 'space-between',
-    justifyContent: 'space-between',
+  alignItems: 'center',
-    alignItems: 'center',
+  padding: '0 15px',
-    padding: '0 15px',
-  },
 });
 
 export const Greetings = styled('span')({
-  '&&': {
+  margin: '0 5px 0 0',
-    margin: '0 5px 0 0',
-  },
 });
 
 export const RightSide = styled(Toolbar)({
-  '&&': {
+  display: 'flex',
-    display: 'flex',
+  padding: 0,
-    padding: 0,
-  },
 });
 
 export const LeftSide = styled(RightSide)({
-  '&&': {
+  flex: 1,
-    flex: 1,
-  },
 });
 
 export const MobileNavBar = styled('div')({
-  '&&': {
+  alignItems: 'center',
-    alignItems: 'center',
+  display: 'flex',
-    display: 'flex',
+  borderBottom: `1px solid ${colors.greyLight}`,
-    borderBottom: `1px solid ${colors.greyLight}`,
+  padding: '8px',
-    padding: '8px',
+  position: 'relative',
-    position: 'relative',
-  },
 });
 
 export const InnerMobileNavBar = styled('div')({
-  '&&': {
+  borderRadius: '4px',
-    borderRadius: '4px',
+  backgroundColor: colors.greyLight,
-    backgroundColor: colors.greyLight,
+  color: colors.white,
-    color: colors.white,
+  width: '100%',
-    width: '100%',
+  padding: '0 5px',
-    padding: '0 5px',
+  margin: '0 10px 0 0',
-    margin: '0 10px 0 0',
-  },
 });
 
 export const IconSearchButton = styled(IconButton)({
-  '&&': {
+  display: 'block',
-    display: 'block',
-  },
 });
 
 export const SearchWrapper = styled('div')({
-  '&&': {
+  display: 'none',
-    display: 'none',
+  maxWidth: '393px',
-    maxWidth: '393px',
+  width: '100%',
-    width: '100%',
-  },
 });
 
 export const NavBar = styled(AppBar)`
@@ -104,8 +88,6 @@ export const NavBar = styled(AppBar)`
   }
 `;
 
-export const StyledExternalLink = styled(ExternalLink)({
+export const StyledLink = styled(Link)({
-  '&&': {
+  color: 'white',
-    color: 'white',
-  },
 });

src/components/Help/Help.tsx

@@ -1,11 +1,11 @@
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
 import React, { Fragment } from 'react';
 
 import { getRegistryURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
 import Button from '../../muiComponents/Button';
+import CardContent from '../../muiComponents/CardContent';
 import { default as Typography } from '../../muiComponents/Heading';
+import CardActions from '../../muiComponents/CardActions';
 import Text from '../../muiComponents/Text';
 
 import { CardStyled as Card, HelpTitle } from './styles';

src/components/Install/InstallListItem.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'react-emotion';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import Avatar from '../../muiComponents/Avatar';
 import ListItem from '../../muiComponents/ListItem';
+import ListItemText from '../../muiComponents/ListItemText';
 
 // logos of package managers
 import npmLogo from './img/npm.svg';

src/components/Link/Link.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import Link from './Link';
-
-describe('<Link /> component', () => {
-  const props = {
-    to: 'https://github.com/verdaccio/ui',
-  };
-  test('should render the component in default state', () => {
-    const wrapper = mount(<Link blank={true} to={props.to} />);
-    expect(wrapper.html()).toMatchSnapshot();
-  });
-});

src/components/Link/Link.tsx

@@ -1,15 +1,26 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 
-interface Props {
+import Text, { TextProps } from '../../muiComponents/Text';
-  children?: ReactNode;
+
+interface Props extends Pick<TextProps, 'variant'> {
+  external?: boolean;
+  className?: string;
   to: string;
-  blank?: boolean;
 }
 
-const Link: React.FC<Props> = ({ children, to = '#', blank = false, ...props }) => (
+/* eslint-disable verdaccio/jsx-spread */
-  <a href={to} target={blank ? '_blank' : '_self'} {...props}>
+const Link: React.FC<Props> = ({ external, to, children, variant, className, ...props }) => {
-    {children}
+  const LinkTextContent = <Text variant={variant}>{children}</Text>;
-  </a>
+  return external ? (
-);
+    <a className={className} href={to} rel="noopener noreferrer" target="_blank" {...props}>
+      {LinkTextContent}
+    </a>
+  ) : (
+    <RouterLink className={className} to={to} {...props}>
+      {LinkTextContent}
+    </RouterLink>
+  );
+};
 
 export default Link;

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

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Link /> component should render the component in default state 1`] = `"<a href=\\"https://github.com/verdaccio/ui\\" target=\\"_blank\\"></a>"`;

src/components/Login/Login.tsx

@@ -1,10 +1,5 @@
 import React, { Component } from 'react';
-import SnackbarContent from '@material-ui/core/SnackbarContent';
 import ErrorIcon from '@material-ui/icons/Error';
-import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
-import FormControl from '@material-ui/core/FormControl';
-import FormHelperText from '@material-ui/core/FormHelperText';
 import { css } from 'emotion';
 
 import Button from '../../muiComponents/Button';
@@ -12,6 +7,11 @@ import Dialog from '../../muiComponents/Dialog';
 import DialogTitle from '../../muiComponents/DialogTitle';
 import DialogContent from '../../muiComponents/DialogContent';
 import DialogActions from '../../muiComponents/DialogActions';
+import FormControl from '../../muiComponents/FormControl';
+import FormHelperText from '../../muiComponents/FormHelperText';
+import Input from '../../muiComponents/Input';
+import InputLabel from '../../muiComponents/InputLabel';
+import SnackbarContent from '../../muiComponents/SnackbarContent';
 
 import * as classes from './styles';
 

src/components/NotFound/NotFound.tsx

@@ -1,10 +1,10 @@
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';
 import React, { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 
+import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
+import Heading from '../../muiComponents/Heading';
 import colors from '../../utils/styles/colors';
 import { spacings } from '../../utils/styles/spacings';
 
@@ -19,7 +19,7 @@ const EmptyPackage = styled('img')({
   margin: '0 auto',
 });
 
-const StyledHeading = styled(Typography)({
+const StyledHeading = styled(Heading)({
   color: colors.primary,
   marginBottom: spacings.sm,
 });

src/components/Package/Package.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import BugReport from '@material-ui/icons/BugReport';
-import Grid from '@material-ui/core/Grid';
 import HomeIcon from '@material-ui/icons/Home';
 
 import { PackageMetaInterface, Author as PackageAuthor } from '../../../types/packageMeta';
@@ -10,6 +9,7 @@ import { formatDate, formatDateDistance } from '../../utils/package';
 import Tooltip from '../../muiComponents/Tooltip';
 import { isURL } from '../../utils/url';
 import ListItem from '../../muiComponents/ListItem';
+import Grid from '../../muiComponents/Grid';
 
 import {
   Author,

src/components/Package/styles.ts

@@ -1,7 +1,5 @@
 import styled from 'react-emotion';
 import { Link } from 'react-router-dom';
-import Grid from '@material-ui/core/Grid';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import { breakpoints } from '../../utils/styles/media';
 import Ico from '../Icon';
@@ -12,6 +10,8 @@ import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
 import { default as Typography } from '../../muiComponents/Heading';
+import Grid from '../../muiComponents/Grid';
+import ListItemText from '../../muiComponents/ListItemText';
 
 export const OverviewItem = styled('span')`
   && {

src/components/PackageList/PackageList.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { Fragment, ReactElement } from 'react';
 
 import Package from '../Package';
 import Help from '../Help';
@@ -13,16 +13,16 @@ interface Props {
 }
 
 export const PackageList: React.FC<Props> = props => {
-  const renderPackages: () => React.ReactElement<HTMLElement>[] = () => {
+  const renderPackages: () => ReactElement<HTMLElement>[] = () => {
     return props.packages.map((pkg, i) => {
       const { name, version, description, time, keywords, dist, homepage, bugs, author } = pkg;
       // TODO: move format license to API side.
       const license = formatLicense(pkg.license);
       return (
-        <React.Fragment key={i}>
+        <Fragment key={i}>
           {i !== 0 && <Divider />}
           <Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
-        </React.Fragment>
+        </Fragment>
       );
     });
   };

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import { css } from 'emotion';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
 
 import CopyToClipBoard from '../CopyToClipBoard';
 import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
 import { NODE_MANAGER } from '../../utils/constants';
 import { default as Typography } from '../../muiComponents/Heading';
+import Tabs from '../../muiComponents/Tabs';
+import Tab from '../../muiComponents/Tab';
 
 import { CommandContainer } from './styles';
 import { Props, State } from './types';

src/components/Repository/styles.ts

@@ -1,12 +1,12 @@
 import styled from 'react-emotion';
-import Grid from '@material-ui/core/Grid';
-import ListItemText from '@material-ui/core/ListItemText';
 
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import ListItem from '../../muiComponents/ListItem';
+import ListItemText from '../../muiComponents/ListItemText';
+import Grid from '../../muiComponents/Grid';
 
 export const StyledText = styled(Text)({
   fontWeight: fontWeight.bold,
@@ -14,9 +14,7 @@ export const StyledText = styled(Text)({
 });
 
 export const GridRepo = styled(Grid)({
-  '&&': {
+  alignItems: 'center',
-    alignItems: 'center',
-  },
 });
 
 export const GithubLink = styled('a')({

src/components/Search/Search.tsx

@@ -3,9 +3,9 @@ import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { SuggestionSelectedEventData, ChangeEvent } from 'react-autosuggest';
 import { css } from 'emotion';
 import { default as IconSearch } from '@material-ui/icons/Search';
-import InputAdornment from '@material-ui/core/InputAdornment';
 import debounce from 'lodash/debounce';
 
+import InputAdornment from '../../muiComponents/InputAdornment';
 import AutoComplete from '../AutoComplete';
 import colors from '../../utils/styles/colors';
 import { callSearch } from '../../utils/calls';
@@ -174,6 +174,7 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
       <InputAdornment
         className={css`
           color: ${colors.white};
+          }
         `}
         position={'start'}>
         <IconSearch />

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root MuiTextField-root react-autosuggest__input MuiFormControl-fullWidth\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\"><div class=\\"MuiInputAdornment-root css-16qv2i2 MuiInputAdornment-positionStart\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input MuiInput-input css-hodoyq MuiInputBase-inputAdornedStart\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;
+exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo e1rflf270\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root MuiTextField-root react-autosuggest__input MuiFormControl-fullWidth\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root MuiInput-root css-n9ojyg MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-adornedStart\\"><div class=\\"MuiInputAdornment-root css-fvu7gn MuiInputAdornment-positionStart\\"><svg class=\\"MuiSvgIcon-root\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input MuiInput-input css-hodoyq MuiInputBase-inputAdornedStart\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root MuiPaper-elevation1 react-autosuggest__suggestions-container css-cfo6a e1rflf271\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;

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

@@ -2,4 +2,4 @@
 
 exports[`<UpLinks /> component should render the component when there is no uplink 1`] = `"<h6 class=\\"MuiTypography-root MuiTypography-subtitle1 MuiTypography-gutterBottom\\">verdaccio has no uplinks.</h6>"`;
 
-exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-5tz9yo e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;
+exports[`<UpLinks /> component should render the component with uplinks 1`] = `"<h6 class=\\"MuiTypography-root css-1vg6q84 e14i1sy10 MuiTypography-subtitle1\\">Uplinks</h6><ul class=\\"MuiList-root MuiList-padding\\"><li class=\\"MuiListItem-root MuiListItem-gutters\\"><div class=\\"MuiListItemText-root css-o655gb e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">npmjs</span></div><div class=\\"css-1l1cv61 e14i1sy11\\"></div><div class=\\"MuiListItemText-root css-o655gb e14i1sy12\\"><span class=\\"MuiTypography-root MuiListItemText-primary MuiTypography-body1\\">over 1 year ago</span></div></li></ul>"`;

src/components/UpLinks/styles.ts

@@ -1,7 +1,7 @@
 import styled from 'react-emotion';
-import { default as MuiListItemText } from '@material-ui/core/ListItemText';
 
 import Text from '../../muiComponents/Text';
+import { default as MuiListItemText } from '../../muiComponents/ListItemText';
 import { fontWeight } from '../../utils/styles/sizes';
 
 export const StyledText = styled(Text)({
@@ -16,9 +16,7 @@ export const Spacer = styled('div')({
 });
 
 export const ListItemText = styled(MuiListItemText)({
-  '&&': {
+  flex: 'none',
-    flex: 'none',
+  color: 'black',
-    color: 'black',
+  opacity: 0.6,
-    opacity: 0.6,
-  },
 });

src/components/Versions/VersionsHistoryList.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
-import Link from '@material-ui/core/Link';
-import { Link as RouterLink } from 'react-router-dom';
 
 import { Versions, Time } from '../../../types/packageMeta';
 import { formatDateDistance } from '../../utils/package';
 import List from '../../muiComponents/List';
 import ListItem from '../../muiComponents/ListItem';
 
-import { Spacer, ListItemText } from './styles';
+import { Spacer, ListItemText, StyledLink } from './styles';
 
 export const NOT_AVAILABLE = 'Not available';
 
@@ -23,9 +21,9 @@ const VersionsHistoryList: React.FC<Props> = ({ versions, packageName, time }) =
       .reverse()
       .map(version => (
         <ListItem className="version-item" key={version}>
-          <Link component={RouterLink} to={`/-/web/detail/${packageName}/v/${version}`}>
+          <StyledLink to={`/-/web/detail/${packageName}/v/${version}`}>
             <ListItemText>{version}</ListItemText>
-          </Link>
+          </StyledLink>
           <Spacer />
           <ListItemText>{time[version] ? `${formatDateDistance(time[version])} ago` : NOT_AVAILABLE}</ListItemText>
         </ListItem>

src/components/Versions/styles.ts

@@ -1,8 +1,9 @@
 import styled from 'react-emotion';
-import { default as MuiListItemText } from '@material-ui/core/ListItemText';
 
 import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
+import { default as MuiListItemText } from '../../muiComponents/ListItemText';
+import Link from '../Link';
 
 export const StyledText = styled(Text)({
   fontWeight: fontWeight.bold,
@@ -17,9 +18,11 @@ export const Spacer = styled('div')({
 });
 
 export const ListItemText = styled(MuiListItemText)({
-  '&&': {
+  flex: 'none',
-    flex: 'none',
+  color: 'black',
-    color: 'black',
+  opacity: 0.6,
-    opacity: 0.6,
+});
-  },
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
 });

src/muiComponents/AppBar/AppBar.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIAppBar, AppBarProps } from '@material-ui/core/AppBar';
+
+type AppBarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const AppBar = forwardRef<AppBarRef, AppBarProps>(function AppBar(props, ref) {
+  return <MaterialUIAppBar {...props} ref={ref} />;
+});
+
+export default AppBar;

src/muiComponents/AppBar/index.ts

@@ -0,0 +1 @@
+export { default } from './AppBar';

src/muiComponents/Box/Box.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { default as MaterialUIBox, BoxProps } from '@material-ui/core/Box';
+
+const Box: React.FC<BoxProps> = props => <MaterialUIBox {...props} />;
+
+export default Box;

src/muiComponents/Box/index.ts

@@ -0,0 +1 @@
+export { default } from './Box';

src/muiComponents/CardActions/CardActions.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUICardActions, CardActionsProps } from '@material-ui/core/CardActions';
+
+type CardActionsRef = HTMLDivElement;
+
+const CardActions = forwardRef<CardActionsRef, CardActionsProps>(function CardContentActions(props, ref) {
+  return <MaterialUICardActions {...props} innerRef={ref} />;
+});
+
+export default CardActions;

src/muiComponents/CardActions/index.ts

@@ -0,0 +1 @@
+export { default } from './CardActions';

src/muiComponents/CardContent/CardContent.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUICardContent, CardContentProps } from '@material-ui/core/CardContent';
+
+type CardContentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const CardContent = forwardRef<CardContentRef, CardContentProps>(function CardContent(props, ref) {
+  return <MaterialUICardContent {...props} innerRef={ref} />;
+});
+
+export default CardContent;

src/muiComponents/CardContent/index.ts

@@ -0,0 +1 @@
+export { default } from './CardContent';

src/muiComponents/Chip/Chip.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIChip, ChipProps } from '@material-ui/core/Chip';
+
+type ChipRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Chip = forwardRef<ChipRef, ChipProps>(function Chip(props, ref) {
+  return <MaterialUIChip {...props} innerRef={ref} />;
+});
+
+export default Chip;

src/muiComponents/Chip/index.ts

@@ -0,0 +1 @@
+export { default } from './Chip';

src/muiComponents/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import { default as MaterialUIDivider, DividerProps } from '@material-ui/core/Divider';
 
-type DividerRef = keyof HTMLElementTagNameMap;
+type DividerRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
 const Divider = forwardRef<DividerRef, DividerProps>(function Divider(props, ref) {
   return <MaterialUIDivider {...props} innerRef={ref} />;

src/muiComponents/FloatingActionButton/FloatingActionButton.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIFab, FabProps } from '@material-ui/core/Fab';
+
+type FloatingActionButtonRef = HTMLButtonElement;
+
+const FloatingActionButton = forwardRef<FloatingActionButtonRef, FabProps>(function FloatingActionButton(props, ref) {
+  return <MaterialUIFab {...props} ref={ref} />;
+});
+
+export default FloatingActionButton;

src/muiComponents/FloatingActionButton/index.ts

@@ -0,0 +1 @@
+export { default } from './FloatingActionButton';

src/muiComponents/FormControl/FormControl.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIFormControl, FormControlProps } from '@material-ui/core/FormControl';
+
+type FormControlRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const FormControl = forwardRef<FormControlRef, FormControlProps>(function FormControl(props, ref) {
+  return <MaterialUIFormControl {...props} innerRef={ref} />;
+});
+
+export default FormControl;

src/muiComponents/FormControl/index.ts

@@ -0,0 +1 @@
+export { default } from './FormControl';

src/muiComponents/FormHelperText/FormHelperText.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIFormHelperText, FormHelperTextProps } from '@material-ui/core/FormHelperText';
+
+type FormHelperTextRef = HTMLButtonElement;
+
+const FormHelperText = forwardRef<FormHelperTextRef, FormHelperTextProps>(function FormHelperText(props, ref) {
+  return <MaterialUIFormHelperText {...props} ref={ref} />;
+});
+
+export default FormHelperText;

src/muiComponents/FormHelperText/index.ts

@@ -0,0 +1 @@
+export { default } from './FormHelperText';

src/muiComponents/Grid/Grid.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIGrid, GridProps } from '@material-ui/core/Grid';
+
+type GridRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Grid = forwardRef<GridRef, GridProps>(function Grid(props, ref) {
+  return <MaterialUIGrid {...props} innerRef={ref} />;
+});
+
+export default Grid;

src/muiComponents/Grid/index.ts

@@ -0,0 +1 @@
+export { default } from './Grid';

src/muiComponents/Input/Input.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIInput, InputProps } from '@material-ui/core/Input';
+
+type InputRef = HTMLDivElement;
+
+const Input = forwardRef<InputRef, InputProps>(function Input(props, ref) {
+  return <MaterialUIInput {...props} ref={ref} />;
+});
+
+export default Input;

src/muiComponents/Input/index.ts

@@ -0,0 +1 @@
+export { default } from './Input';

src/muiComponents/InputAdornment/InputAdornment.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIInputAdornment, InputAdornmentProps } from '@material-ui/core/InputAdornment';
+
+type InputAdornmentRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const InputAdornment = forwardRef<InputAdornmentRef, InputAdornmentProps>(function InputAdornment(props, ref) {
+  return <MaterialUIInputAdornment {...props} ref={ref} />;
+});
+
+export default InputAdornment;

src/muiComponents/InputAdornment/index.ts

@@ -0,0 +1 @@
+export { default } from './InputAdornment';

src/muiComponents/InputLabel/InputLabel.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIInputLabel, InputLabelProps } from '@material-ui/core/InputLabel';
+
+type InputLabelRef = HTMLLabelElement;
+
+const InputLabel = forwardRef<InputLabelRef, InputLabelProps>(function InputLabel(props, ref) {
+  return <MaterialUIInputLabel {...props} ref={ref} />;
+});
+
+export default InputLabel;

src/muiComponents/InputLabel/index.ts

@@ -0,0 +1 @@
+export { default } from './InputLabel';

src/muiComponents/ListItemText/ListItemText.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIListItemText, ListItemTextProps } from '@material-ui/core/ListItemText';
+
+type ListItemTextRef = HTMLDivElement;
+
+const ListItemText = forwardRef<ListItemTextRef, ListItemTextProps>(function ListItemText(props, ref) {
+  return <MaterialUIListItemText {...props} ref={ref} />;
+});
+
+export default ListItemText;

src/muiComponents/ListItemText/index.ts

@@ -0,0 +1 @@
+export { default } from './ListItemText';

src/muiComponents/Menu/Menu.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIMenu, MenuProps } from '@material-ui/core/Menu';
+
+type MenuRef = HTMLDivElement;
+
+const Menu = forwardRef<MenuRef, MenuProps>(function Menu(props, ref) {
+  return <MaterialUIMenu {...props} ref={ref} />;
+});
+
+export default Menu;

src/muiComponents/Menu/index.ts

@@ -0,0 +1 @@
+export { default } from './Menu';

src/muiComponents/MenuItem/MenuItem.tsx

@@ -0,0 +1,21 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIMenuItem, MenuItemProps } from '@material-ui/core/MenuItem';
+
+type HTMLElementTagName = keyof HTMLElementTagNameMap;
+type MenuItemRef = HTMLElementTagNameMap[HTMLElementTagName];
+
+interface Props extends Omit<MenuItemProps, 'component'> {
+  component?: HTMLElementTagName;
+}
+
+const MenuItem = forwardRef<MenuItemRef, Props>(function MenuItem({ button, ...props }, ref) {
+  // it seems typescript has some discrimination type limitions. Please see: https://github.com/mui-org/material-ui/issues/14971
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return <MaterialUIMenuItem {...props} button={button as any} innerRef={ref} />;
+});
+
+MenuItem.defaultProps = {
+  component: 'li',
+};
+
+export default MenuItem;

src/muiComponents/MenuItem/index.ts

@@ -0,0 +1 @@
+export { default } from './MenuItem';

src/muiComponents/Paper/Paper.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIPaper, PaperProps } from '@material-ui/core/Paper';
+
+type PaperRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Paper = forwardRef<PaperRef, PaperProps>(function Paper(props, ref) {
+  return <MaterialUIPaper {...props} ref={ref} />;
+});
+
+export default Paper;

src/muiComponents/Paper/index.ts

@@ -0,0 +1 @@
+export { default } from './Paper';

src/muiComponents/SnackbarContent/SnackbarContent.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUISnackbarContent, SnackbarContentProps } from '@material-ui/core/SnackbarContent';
+
+type SnackbarContentRef = HTMLDivElement;
+
+const SnackbarContent = forwardRef<SnackbarContentRef, SnackbarContentProps>(function SnackbarContent(props, ref) {
+  return <MaterialUISnackbarContent {...props} ref={ref} />;
+});
+
+export default SnackbarContent;

src/muiComponents/SnackbarContent/index.ts

@@ -0,0 +1 @@
+export { default } from './SnackbarContent';

src/muiComponents/Tab/Tab.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUITab, TabProps } from '@material-ui/core/Tab';
+
+type TabRef = HTMLButtonElement;
+
+const Tab = forwardRef<TabRef, TabProps>(function Tab(props, ref) {
+  return <MaterialUITab {...props} innerRef={ref} />;
+});
+
+export default Tab;

src/muiComponents/Tab/index.ts

@@ -0,0 +1 @@
+export { default } from './Tab';

src/muiComponents/Tabs/Tabs.tsx

@@ -0,0 +1,14 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUITabs, TabsProps } from '@material-ui/core/Tabs';
+
+type TabsRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+interface Props extends Omit<TabsProps, 'onChange'> {
+  onChange: (event: React.ChangeEvent<{}>, value: number) => void;
+}
+
+const Tabs = forwardRef<TabsRef, Props>(function Tabs(props, ref) {
+  return <MaterialUITabs {...props} innerRef={ref} />;
+});
+
+export default Tabs;

src/muiComponents/Tabs/index.ts

@@ -0,0 +1 @@
+export { default } from './Tabs';

src/muiComponents/Text/Text.tsx

@@ -2,14 +2,14 @@ import React, { forwardRef } from 'react';
 import { default as MaterialUITypography, TypographyProps } from '@material-ui/core/Typography';
 
 type TextType = 'subtitle1' | 'subtitle2' | 'body1' | 'body2';
-type TextRef = keyof HTMLElementTagNameMap;
+type TextRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
-interface Props extends Omit<TypographyProps, 'variant'> {
+export interface TextProps extends Omit<TypographyProps, 'variant'> {
   variant?: TextType;
 }
 
 // The reference is already from type of the Component, so the any below is not a problem
-const Text = forwardRef<TextRef, Props>(function Text(props, ref) {
+const Text = forwardRef<TextRef, TextProps>(function Text(props, ref) {
   return <MaterialUITypography {...props} ref={ref} />;
 });
 

src/muiComponents/Text/index.ts

@@ -1 +1 @@
-export { default } from './Text';
+export { default, TextProps } from './Text';

src/muiComponents/Toolbar/Toolbar.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIToolbar, ToolbarProps } from '@material-ui/core/Toolbar';
+
+type ToolbarRef = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
+
+const Toolbar = forwardRef<ToolbarRef, ToolbarProps>(function Toolbar(props, ref) {
+  return <MaterialUIToolbar {...props} ref={ref} />;
+});
+
+export default Toolbar;

src/muiComponents/Toolbar/index.ts

@@ -0,0 +1 @@
+export { default } from './Toolbar';