List Component - Introduced ForwardRef

src/components/ActionBar/ActionBar.tsx

@@ -2,12 +2,12 @@ import React, { Component, ReactElement } from 'react';
 import BugReportIcon from '@material-ui/icons/BugReport';
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import HomeIcon from '@material-ui/icons/Home';
-import List from '@material-ui/core/List';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/Version';
 import { isURL, extractFileName, downloadFile } from '../../utils/url';
 import api from '../../utils/api';
 import Tooltip from '../../muiComponents/Tooltip';
+import List from '../../muiComponents/List';
 
 import { Fab, ActionListItem } from './styles';
 

src/components/Author/Author.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useContext } from 'react';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import { isEmail } from '../../utils/url';
 import Avatar from '../../muiComponents/Avatar';
+import List from '../../muiComponents/List';
 
 import { Heading, AuthorListItem, AuthorListItemText } from './styles';
 

src/components/DetailSidebar/DetailSidebar.tsx

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

src/components/Dist/Dist.tsx

@@ -1,9 +1,9 @@
 import React, { FC, useContext } from 'react';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import fileSizeSI from '../../utils/file-size';
 import { formatLicense } from '../../utils/package';
+import List from '../../muiComponents/List';
 
 import { Heading, DistListItem, DistChips } from './styles';
 

src/components/Engines/Engines.tsx

@@ -1,10 +1,10 @@
 import React, { Component, ReactElement } from 'react';
 import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
 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 { Heading, EngineListItem } from './styles';

src/components/Install/Install.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import styled from 'react-emotion';
 import Typography from '@material-ui/core/Typography';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import { fontWeight } from '../../utils/styles/sizes';
+import List from '../../muiComponents/List';
 
 import InstallListItem, { DependencyManager } from './InstallListItem';
 

src/components/NotFound/styles.ts

@@ -0,0 +1,40 @@
+import { default as MuiCard } from '@material-ui/core/Card';
+import Typography from '@material-ui/core/Typography';
+import styled from 'react-emotion';
+
+import List from '../../muiComponents/List';
+
+export const Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  flex: 1,
+  padding: '16px',
+});
+
+export const Inner = styled('div')({
+  maxWidth: '650px',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});
+
+export const Heading = styled(Typography)({
+  '&&': {
+    color: '#4b5e40',
+  },
+});
+
+export const StyledList = styled(List)({
+  padding: 0,
+  color: '#4b5e40',
+});
+
+export const Card = styled(MuiCard)({
+  marginTop: '24px',
+});

src/components/Package/styles.ts

@@ -1,7 +1,6 @@
 import styled from 'react-emotion';
 import { Link } from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
 import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 
@@ -12,6 +11,7 @@ import colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
+import List from '../../muiComponents/List';
 
 export const OverviewItem = styled('span')`
   && {

src/components/Repository/Repository.tsx

@@ -1,12 +1,12 @@
 /* eslint react/jsx-max-depth: 0 */
 
-import List from '@material-ui/core/List';
 import React, { Component, Fragment, ReactElement } from 'react';
 
 import Avatar from '../../muiComponents/Avatar';
 import { DetailContextConsumer } from '../../pages/Version';
 import { isURL } from '../../utils/url';
 import CopyToClipBoard from '../CopyToClipBoard';
+import List from '../../muiComponents/List';
 
 import git from './img/git.png';
 import { GithubLink, Heading, RepositoryListItem, RepositoryListItemText } from './styles';

src/components/UpLinks/UpLinks.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import List from '@material-ui/core/List';
 
 import { DetailContext } from '../../pages/Version';
 import NoItems from '../NoItems';
 import { formatDateDistance } from '../../utils/package';
+import List from '../../muiComponents/List';
 import ListItem from '../../muiComponents/ListItem';
 
 import { Heading, Spacer, ListItemText } from './styles';

src/components/Versions/VersionsHistoryList.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import List from '@material-ui/core/List';
 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';

src/components/Versions/VersionsTagList.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import List from '@material-ui/core/List';
 
 import { DistTags } from '../../../types/packageMeta';
 import ListItem from '../../muiComponents/ListItem';
+import List from '../../muiComponents/List';
 
 import { Spacer, ListItemText } from './styles';
 

src/muiComponents/List/List.tsx

@@ -0,0 +1,10 @@
+import React, { forwardRef } from 'react';
+import { default as MaterialUIList, ListProps } from '@material-ui/core/List';
+
+type ListRef = HTMLUListElement;
+
+const List = forwardRef<ListRef, ListProps>(function List(props, ref) {
+  return <MaterialUIList {...props} ref={ref} />;
+});
+
+export default List;

src/muiComponents/List/index.ts

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