fix: @typescript-eslint/no-explicit-any

src/App/App.tsx

@@ -15,7 +15,7 @@ import '../styles/main.scss';
 import 'normalize.css';
 import Footer from '../components/Footer';
 
-export const AppContext = React.createContext<null>(null);
+export const AppContext = React.createContext<{}>({});
 export const AppContextProvider = AppContext.Provider;
 export const AppContextConsumer = AppContext.Consumer;
 
@@ -49,7 +49,7 @@ export default class App extends Component {
   public render(): React.ReactElement<HTMLDivElement> {
     const { isLoading, isUserLoggedIn, packages, logoUrl, user, scope } = this.state;
 
-    const context: any = { isUserLoggedIn, packages, logoUrl, user, scope };
+    const context = { isUserLoggedIn, packages, logoUrl, user, scope };
 
     return (
       // @ts-ignore

src/components/ActionBar/ActionBar.tsx

@@ -25,7 +25,7 @@ const ACTIONS = {
   },
 };
 
-class ActionBar extends Component<any, any> {
+class ActionBar extends Component {
   public render(): ReactElement<HTMLElement> {
     return (
       <DetailContextConsumer>
@@ -36,7 +36,7 @@ class ActionBar extends Component<any, any> {
     );
   }
 
-  private renderIconsWithLink(link: string, component: any): ReactElement<HTMLElement> {
+  private renderIconsWithLink(link: string, component: JSX.Element): ReactElement<HTMLElement> {
     return (
       <a href={link} target={'_blank'}>
         {component}

src/components/AutoComplete/AutoComplete.tsx

@@ -7,21 +7,21 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { fontWeight } from '../../utils/styles/sizes';
 import { Wrapper, InputField, SuggestionContainer } from './styles';
 
-export interface Props {
-  suggestions: any[];
+interface Props {
+  suggestions: unknown[];
   suggestionsLoading?: boolean;
   suggestionsLoaded?: boolean;
   suggestionsError?: boolean;
   apiLoading?: boolean;
   color?: string;
   value?: string;
   placeholder?: string;
-  startAdornment?: any;
+  startAdornment?: JSX.Element;
   disableUnderline?: boolean;
   onChange?: (event: KeyboardEvent<HTMLInputElement>, { newValue, method }: { newValue: string; method: string }) => void;
   onSuggestionsFetch?: ({ value: string }) => Promise<void>;
   onCleanSuggestions?: () => void;
-  onClick?: (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: any[]; method: string }) => void;
+  onClick?: (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: string[]; method: string }) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: KeyboardEvent<HTMLInputElement>) => void;
 }

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -12,7 +12,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const renderText: React.FC<any> = (text: string, children: React.ReactNode): React.ReactElement<HTMLElement> => {
+const renderText = (text, children): JSX.Element => {
   if (children) {
     return <ClipBoardCopyText>{children}</ClipBoardCopyText>;
   }

src/components/Dependencies/Dependencies.tsx

@@ -1,14 +1,25 @@
 import React, { Component, Fragment, ReactElement } from 'react';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteProps } from 'react-router-dom';
 import CardContent from '@material-ui/core/CardContent';
 
 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
 
 import { CardWrap, Heading, Tags, Tag } from './styles';
 import NoItems from '../NoItems';
 
-class DepDetail extends Component<any, any> {
-  constructor(props: any) {
+interface DepDetailProps {
+  name: string;
+  version: string;
+  onLoading: () => void;
+  history: string[];
+}
+interface DepDetailState {
+  name: string;
+  version: string;
+}
+
+class DepDetail extends Component<DepDetailProps & RouteProps, DepDetailState> {
+  constructor(props: DepDetailProps) {
     super(props);
     const { name, version } = this.props;
 
@@ -33,16 +44,16 @@ class DepDetail extends Component<any, any> {
   };
 }
 
-const WrapperDependencyDetail = withRouter(DepDetail);
+const WrapperDependencyDetail = withRouter<any>(DepDetail);
 
-class DependencyBlock extends Component<any, any> {
+class DependencyBlock extends Component<{ title: string; dependencies: [] }> {
   public render(): ReactElement<HTMLElement> {
     const { dependencies, title } = this.props;
-    const deps = Object.entries(dependencies);
+    const deps = Object.entries(dependencies) as [];
 
     return (
       <DetailContextConsumer>
-        {({ enableLoading }: any) => {
+        {({ enableLoading }) => {
           return (
             <CardWrap>
               <CardContent>
@@ -56,15 +67,15 @@ class DependencyBlock extends Component<any, any> {
     );
   }
 
-  private renderTags = (deps: any, enableLoading: any) =>
+  private renderTags = (deps: [], enableLoading?: () => void) =>
     deps.map(dep => {
-      const [name, version] = dep;
+      const [name, version] = dep as [string, string];
 
       return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
     });
 }
 
-class Dependencies extends Component<any, any> {
+class Dependencies extends Component {
   public state = {
     tabPosition: 0,
   };
@@ -79,7 +90,7 @@ class Dependencies extends Component<any, any> {
     );
   }
 
-  private checkDependencyLength(dependency: Record<string, any> = {}): boolean {
+  private checkDependencyLength<T>(dependency: Record<string, T> = {}): boolean {
     return Object.keys(dependency).length > 0;
   }
 

src/components/Developers/Developers.tsx

@@ -11,18 +11,21 @@ import { isEmail } from '../../utils/url';
 interface Props {
   type: 'contributors' | 'maintainers';
 }
+interface State {
+  visibleDevs: number;
+}
 
-class Developers extends Component<Props, any> {
+class Developers extends Component<Props, State> {
   public state = {
     visibleDevs: 6,
   };
 
   public render(): JSX.Element {
     return (
       <DetailContextConsumer>
-        {({ packageMeta }: any) => {
+        {({ packageMeta }) => {
           const { type } = this.props;
-          const developerType = packageMeta.latest[type];
+          const developerType = packageMeta && packageMeta.latest[type];
           if (!developerType || developerType.length === 0) return null;
           return this.renderDevelopers(developerType, packageMeta);
         }}

src/components/Dist/Dist.tsx

@@ -2,22 +2,23 @@ import React, { Component } from 'react';
 
 import List from '@material-ui/core/List';
 
-import { DetailContextConsumer } from '../../pages/version/Version';
+import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
 import { Heading, DistListItem, DistChips } from './styles';
 import fileSizeSI from '../../utils/file-size';
+import { PackageMetaInterface } from 'types/packageMeta';
 
-class Dist extends Component<any, any> {
+class Dist extends Component {
   public render(): JSX.Element {
     return (
       <DetailContextConsumer>
-        {(context: any) => {
-          return this.renderDist(context);
+        {(context: Partial<VersionPageConsumerProps>) => {
+          return context && context.packageMeta && this.renderDist(context.packageMeta);
         }}
       </DetailContextConsumer>
     );
   }
 
-  private renderChips(dist: any, license: string): JSX.Element | never[] {
+  private renderChips(dist, license: string): JSX.Element | never[] {
     const distDict = {
       'file-count': dist.fileCount,
       size: dist.unpackedSize && fileSizeSI(dist.unpackedSize),
@@ -43,8 +44,8 @@ class Dist extends Component<any, any> {
     return chipsList;
   }
 
-  private renderDist = ({ packageMeta }: any) => {
-    const { dist = {}, license } = packageMeta.latest;
+  private renderDist = (packageMeta: PackageMetaInterface) => {
+    const { dist, license } = packageMeta && packageMeta.latest;
 
     return (
       <List subheader={<Heading variant="subheading">{'Latest Distribution'}</Heading>}>

src/components/Header/Header.tsx

@@ -31,7 +31,7 @@ interface Props {
 }
 
 interface State {
-  anchorEl?: any;
+  anchorEl?: null | HTMLElement | ((element: HTMLElement) => HTMLElement);
   openInfoDialog: boolean;
   registryUrl: string;
   showMobileNavBar: boolean;

src/components/Icon/Icon.tsx

@@ -1,5 +1,6 @@
 import React, { MouseEvent } from 'react';
 import capitalize from 'lodash/capitalize';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
 import { Svg, Img, ImgWrapper } from './styles';
 
@@ -57,10 +58,10 @@ export interface Props {
   name: keyof IconsMap;
   className?: string;
   onClick?: (event: MouseEvent<SVGElement | HTMLSpanElement>) => void;
-  size?: 'sm' | 'md';
+  size?: Breakpoint;
   pointer?: boolean;
   img?: boolean;
-  modifiers?: any;
+  modifiers?: null | undefined;
 }
 
 const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => {

src/components/Icon/styles.ts

@@ -1,6 +1,7 @@
 import styled, { css } from 'react-emotion';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
-const getSize = (size: 'md' | 'sm' | string): string => {
+const getSize = (size: Breakpoint): string => {
   switch (size) {
     case 'md':
       return `
@@ -15,7 +16,7 @@ const getSize = (size: 'md' | 'sm' | string): string => {
   }
 };
 
-const commonStyle = ({ size = 'sm' as 'md' | 'sm' | string, pointer, modifiers = null }): string => css`
+const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }): string => css`
   && {
     display: inline-block;
     cursor: ${pointer ? 'pointer' : 'default'};

src/components/Label/Label.tsx

@@ -6,7 +6,7 @@ interface Props {
   text: string;
   capitalize?: boolean;
   weight?: string;
-  modifiers?: any;
+  modifiers?: null | undefined;
 }
 
 const Wrapper = styled('div')`

src/components/NotFound/NotFound.tsx

@@ -6,10 +6,11 @@ import { RouteComponentProps, withRouter } from 'react-router-dom';
 
 import PackageImg from './img/package.svg';
 import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles';
+import { Breakpoint } from '@material-ui/core/styles/createBreakpoints';
 
 export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
 
-export type NotFoundProps = RouteComponentProps & { width: any; history: any };
+export type NotFoundProps = RouteComponentProps & { width: Breakpoint; history };
 
 const NotFound: React.FC<NotFoundProps> = ({ history, width }) => {
   const handleGoTo = (to: string): (() => void | undefined) => () => {

src/components/RegistryInfoContent/RegistryInfoContent.tsx

@@ -30,7 +30,7 @@ class RegistryInfoContent extends Component<Props, State> {
     return <div>{this.renderTabs()}</div>;
   }
 
-  private handleChange = (event: any, tabPosition: number) => {
+  private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => {
     event.preventDefault();
     this.setState({ tabPosition });
   };

src/components/Search/Search.tsx

@@ -11,11 +11,15 @@ import colors from '../../utils/styles/colors';
 
 export interface State {
   search: string;
-  suggestions: any[];
+  suggestions: unknown[];
   loading: boolean;
   loaded: boolean;
   error: boolean;
 }
+interface AbortControllerInterface {
+  signal: () => void;
+  abort: () => void;
+}
 
 export type cancelAllSearchRequests = () => void;
 export type handlePackagesClearRequested = () => void;
@@ -31,8 +35,6 @@ const CONSTANTS = {
 };
 
 export class Search extends Component<RouteComponentProps<{}>, State> {
-  private requestList: any[];
-
   constructor(props: RouteComponentProps<{}>) {
     super(props);
     this.state = {
@@ -96,7 +98,10 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
   /**
    * When an user select any package by clicking or pressing return key.
    */
-  private handleClickSearch: handleClickSearch = (event, { suggestionValue, method }: any) => {
+  private handleClickSearch = (
+    event: React.KeyboardEvent<HTMLInputElement>,
+    { suggestionValue, method }: { suggestionValue: string[]; method: string }
+  ): void | undefined => {
     const { history } = this.props;
     // stops event bubbling
     event.stopPropagation();
@@ -163,7 +168,9 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
     );
   }
 
-  public getAdorment(): ReactElement<HTMLElement> {
+  private requestList: AbortControllerInterface[];
+
+  public getAdorment(): JSX.Element {
     return (
       <InputAdornment position={'start'} style={{ color: colors.white }}>
         <IconSearch />

src/components/Versions/Versions.tsx

@@ -8,7 +8,7 @@ import { DIST_TAGS } from '../../../lib/constants';
 
 const NOT_AVAILABLE = 'Not available';
 
-class Versions extends React.PureComponent<any> {
+class Versions extends React.PureComponent {
   public render(): ReactElement<HTMLDivElement> {
     return (
       <DetailContextConsumer>

types/packageMeta.ts

@@ -1,6 +1,11 @@
 export interface PackageMetaInterface {
   latest: {
     name: string;
+    dist: {
+      fileCount: number;
+      unpackedSize: number;
+    };
+    license: string;
   };
   _uplinks: {};
 }