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/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',
-    color: 'black',
-    opacity: 0.6,
-  },
+  flex: 'none',
+  color: 'black',
+  opacity: 0.6,
+});
+
+export const StyledLink = styled(Link)({
+  textDecoration: 'none',
 });