diff --git a/src/App/App.tsx b/src/App/App.tsx index 24e14b8..674e175 100644 --- a/src/App/App.tsx +++ b/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); +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 { 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 diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx index 9c8aff3..b8a0fbf 100644 --- a/src/components/ActionBar/ActionBar.tsx +++ b/src/components/ActionBar/ActionBar.tsx @@ -25,7 +25,7 @@ const ACTIONS = { }, }; -class ActionBar extends Component { +class ActionBar extends Component { public render(): ReactElement { return ( @@ -36,7 +36,7 @@ class ActionBar extends Component { ); } - private renderIconsWithLink(link: string, component: any): ReactElement { + private renderIconsWithLink(link: string, component: JSX.Element): ReactElement { return ( {component} diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx index ba9c6a2..7fc2eb7 100644 --- a/src/components/AutoComplete/AutoComplete.tsx +++ b/src/components/AutoComplete/AutoComplete.tsx @@ -7,8 +7,8 @@ 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; @@ -16,12 +16,12 @@ export interface Props { color?: string; value?: string; placeholder?: string; - startAdornment?: any; + startAdornment?: JSX.Element; disableUnderline?: boolean; onChange?: (event: KeyboardEvent, { newValue, method }: { newValue: string; method: string }) => void; onSuggestionsFetch?: ({ value: string }) => Promise; onCleanSuggestions?: () => void; - onClick?: (event: KeyboardEvent, { suggestionValue, method }: { suggestionValue: any[]; method: string }) => void; + onClick?: (event: KeyboardEvent, { suggestionValue, method }: { suggestionValue: string[]; method: string }) => void; onKeyDown?: (event: KeyboardEvent) => void; onBlur?: (event: KeyboardEvent) => void; } diff --git a/src/components/CopyToClipBoard/CopyToClipBoard.tsx b/src/components/CopyToClipBoard/CopyToClipBoard.tsx index 24f648b..765e2b7 100644 --- a/src/components/CopyToClipBoard/CopyToClipBoard.tsx +++ b/src/components/CopyToClipBoard/CopyToClipBoard.tsx @@ -12,7 +12,7 @@ interface Props { children?: React.ReactNode; } -const renderText: React.FC = (text: string, children: React.ReactNode): React.ReactElement => { +const renderText = (text, children): JSX.Element => { if (children) { return {children}; } diff --git a/src/components/Dependencies/Dependencies.tsx b/src/components/Dependencies/Dependencies.tsx index 931a316..4033cf2 100644 --- a/src/components/Dependencies/Dependencies.tsx +++ b/src/components/Dependencies/Dependencies.tsx @@ -1,5 +1,5 @@ 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'; @@ -7,8 +7,19 @@ import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/ver import { CardWrap, Heading, Tags, Tag } from './styles'; import NoItems from '../NoItems'; -class DepDetail extends Component { - constructor(props: any) { +interface DepDetailProps { + name: string; + version: string; + onLoading: () => void; + history: string[]; +} +interface DepDetailState { + name: string; + version: string; +} + +class DepDetail extends Component { + constructor(props: DepDetailProps) { super(props); const { name, version } = this.props; @@ -33,16 +44,16 @@ class DepDetail extends Component { }; } -const WrapperDependencyDetail = withRouter(DepDetail); +const WrapperDependencyDetail = withRouter(DepDetail); -class DependencyBlock extends Component { +class DependencyBlock extends Component<{ title: string; dependencies: [] }> { public render(): ReactElement { const { dependencies, title } = this.props; - const deps = Object.entries(dependencies); + const deps = Object.entries(dependencies) as []; return ( - {({ enableLoading }: any) => { + {({ enableLoading }) => { return ( @@ -56,15 +67,15 @@ class DependencyBlock extends Component { ); } - 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 ; }); } -class Dependencies extends Component { +class Dependencies extends Component { public state = { tabPosition: 0, }; @@ -79,7 +90,7 @@ class Dependencies extends Component { ); } - private checkDependencyLength(dependency: Record = {}): boolean { + private checkDependencyLength(dependency: Record = {}): boolean { return Object.keys(dependency).length > 0; } diff --git a/src/components/Developers/Developers.tsx b/src/components/Developers/Developers.tsx index 9ca8f6e..68d87ca 100644 --- a/src/components/Developers/Developers.tsx +++ b/src/components/Developers/Developers.tsx @@ -11,8 +11,11 @@ import { isEmail } from '../../utils/url'; interface Props { type: 'contributors' | 'maintainers'; } +interface State { + visibleDevs: number; +} -class Developers extends Component { +class Developers extends Component { public state = { visibleDevs: 6, }; @@ -20,9 +23,9 @@ class Developers extends Component { public render(): JSX.Element { return ( - {({ 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); }} diff --git a/src/components/Dist/Dist.tsx b/src/components/Dist/Dist.tsx index bb30498..3b05cf4 100644 --- a/src/components/Dist/Dist.tsx +++ b/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 { +class Dist extends Component { public render(): JSX.Element { return ( - {(context: any) => { - return this.renderDist(context); + {(context: Partial) => { + return context && context.packageMeta && this.renderDist(context.packageMeta); }} ); } - 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 { return chipsList; } - private renderDist = ({ packageMeta }: any) => { - const { dist = {}, license } = packageMeta.latest; + private renderDist = (packageMeta: PackageMetaInterface) => { + const { dist, license } = packageMeta && packageMeta.latest; return ( {'Latest Distribution'}}> diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index de9f94c..743ff11 100644 --- a/src/components/Header/Header.tsx +++ b/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; diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index ba49923..748d3b1 100644 --- a/src/components/Icon/Icon.tsx +++ b/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) => void; - size?: 'sm' | 'md'; + size?: Breakpoint; pointer?: boolean; img?: boolean; - modifiers?: any; + modifiers?: null | undefined; } const Icon: React.FC = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => { diff --git a/src/components/Icon/styles.ts b/src/components/Icon/styles.ts index 01249cc..9bd3ba9 100644 --- a/src/components/Icon/styles.ts +++ b/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'}; diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index c9aa93b..95fa878 100644 --- a/src/components/Label/Label.tsx +++ b/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')` diff --git a/src/components/NotFound/NotFound.tsx b/src/components/NotFound/NotFound.tsx index 6350558..b5fdd07 100644 --- a/src/components/NotFound/NotFound.tsx +++ b/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 = ({ history, width }) => { const handleGoTo = (to: string): (() => void | undefined) => () => { diff --git a/src/components/RegistryInfoContent/RegistryInfoContent.tsx b/src/components/RegistryInfoContent/RegistryInfoContent.tsx index 3444cd3..2333fab 100644 --- a/src/components/RegistryInfoContent/RegistryInfoContent.tsx +++ b/src/components/RegistryInfoContent/RegistryInfoContent.tsx @@ -30,7 +30,7 @@ class RegistryInfoContent extends Component { return
{this.renderTabs()}
; } - private handleChange = (event: any, tabPosition: number) => { + private handleChange = (event: React.ChangeEvent<{}>, tabPosition: number) => { event.preventDefault(); this.setState({ tabPosition }); }; diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 5692cb7..ec11715 100644 --- a/src/components/Search/Search.tsx +++ b/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, State> { - private requestList: any[]; - constructor(props: RouteComponentProps<{}>) { super(props); this.state = { @@ -96,7 +98,10 @@ export class Search extends Component, 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, + { 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, State> { ); } - public getAdorment(): ReactElement { + private requestList: AbortControllerInterface[]; + + public getAdorment(): JSX.Element { return ( diff --git a/src/components/Versions/Versions.tsx b/src/components/Versions/Versions.tsx index ac3f5ec..500e72e 100644 --- a/src/components/Versions/Versions.tsx +++ b/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 { +class Versions extends React.PureComponent { public render(): ReactElement { return ( diff --git a/types/packageMeta.ts b/types/packageMeta.ts index 17e24b6..473c331 100644 --- a/types/packageMeta.ts +++ b/types/packageMeta.ts @@ -1,6 +1,11 @@ export interface PackageMetaInterface { latest: { name: string; + dist: { + fileCount: number; + unpackedSize: number; + }; + license: string; }; _uplinks: {}; }