Merge pull request #153 from antoinechalifour/fix-ts-ignore

Fix a few ts-ignore

src/App/App.tsx

@@ -29,16 +29,14 @@ export interface AppStateInterface {
   scope: string;
   showLoginModal: boolean;
   isUserLoggedIn: boolean;
-  packages: [];
+  packages: any[];
   isLoading: boolean;
 }
 export default class App extends Component<{}, AppStateInterface> {
   public state: AppStateInterface = {
-    // @ts-ignore
     logoUrl: window.VERDACCIO_LOGO,
     user: {},
-    // @ts-ignore
+    scope: window.VERDACCIO_SCOPE || '',
-    scope: window.VERDACCIO_SCOPE ? `${window.VERDACCIO_SCOPE}:` : '',
     showLoginModal: false,
     isUserLoggedIn: false,
     packages: [],
@@ -64,7 +62,6 @@ export default class App extends Component<{}, AppStateInterface> {
     const context = { isUserLoggedIn, packages, logoUrl, user, scope };
 
     return (
-      // @ts-ignore
       <Container isLoading={isLoading}>
         {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
         {this.renderLoginModal()}
@@ -88,11 +85,9 @@ export default class App extends Component<{}, AppStateInterface> {
 
   public loadOnHandler = async () => {
     try {
-      // @ts-ignore
+      const packages = await API.request<any[]>('packages', 'GET');
-      this.req = await API.request('packages', 'GET');
       this.setState({
-        // @ts-ignore
+        packages,
-        packages: this.req,
         isLoading: false,
       });
     } catch (error) {
@@ -116,7 +111,6 @@ export default class App extends Component<{}, AppStateInterface> {
    */
   public handleToggleLoginModal = () => {
     this.setState(prevState => ({
-      // @ts-ignore
       showLoginModal: !prevState.showLoginModal,
     }));
   };
@@ -126,7 +120,6 @@ export default class App extends Component<{}, AppStateInterface> {
    * Required by: <Header />
    */
   public handleDoLogin = async (usernameValue, passwordValue) => {
-    // @ts-ignore
     const { username, token, error } = await makeLogin(usernameValue, passwordValue);
 
     if (username && token) {
@@ -187,7 +180,6 @@ export default class App extends Component<{}, AppStateInterface> {
   public renderHeader = (): ReactElement<HTMLElement> => {
     const {
       logoUrl,
-      // @ts-ignore
       user: { username },
       scope,
     } = this.state;

src/components/ActionBar/ActionBar.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { ActionBar } from './ActionBar';
 
-const mockPackageMeta = jest.fn(() => ({
+const mockPackageMeta: jest.Mock = jest.fn(() => ({
   latest: {
     homepage: 'https://verdaccio.tld',
     bugs: {
@@ -32,7 +32,6 @@ describe('<ActionBar /> component', () => {
   });
 
   test('when there is no action bar data', () => {
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => ({
       latest: {},
     }));
@@ -44,7 +43,6 @@ describe('<ActionBar /> component', () => {
   });
 
   test('when there is a button to download a tarball', () => {
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => ({
       latest: {
         dist: {

src/components/ActionBar/ActionBar.tsx

@@ -70,7 +70,6 @@ class ActionBar extends Component {
   }
 
   private renderActionBar = ({ packageMeta }) => {
-    // @ts-ignore
     const { latest } = packageMeta;
 
     if (!latest) {
@@ -107,7 +106,6 @@ class ActionBar extends Component {
         } else {
           const fab = <Fab size={'small'}>{actionItem['icon']}</Fab>;
           component.push(
-            // @ts-ignore
             <Tooltip key={key} title={actionItem['title']}>
               <>{this.renderIconsWithLink(link, fab)}</>
             </Tooltip>

src/components/Dependencies/Dependencies.tsx

@@ -96,14 +96,16 @@ class Dependencies extends Component {
 
     const dependencyMap = { dependencies, devDependencies, peerDependencies };
 
-    const dependencyList = Object.keys(dependencyMap).reduce((result, value, key) => {
+    const dependencyList = Object.keys(dependencyMap).reduce(
-      const selectedDepndency = dependencyMap[value];
+      (result, value, key) => {
-      if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
+        const selectedDepndency = dependencyMap[value];
-        // @ts-ignore
+        if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) {
-        result.push(<DependencyBlock className="dependency-block" dependencies={selectedDepndency} key={key} title={value} />);
+          result.push(<DependencyBlock dependencies={selectedDepndency} key={key} title={value} />);
-      }
+        }
-      return result;
+        return result;
-    }, []);
+      },
+      [] as JSX.Element[]
+    );
 
     if (dependencyList.length) {
       return <Fragment>{dependencyList}</Fragment>;

src/components/Developers/Developers.tsx

@@ -18,7 +18,7 @@ const Developers: FC<Props> = ({ type, visibleMax }) => {
   const [visibleDevs, setVisibleDevs] = React.useState<number>(visibleMax || VISIBLE_MAX);
   const { packageMeta } = React.useContext(DetailContext);
 
-  const handleLoadMore = () => {
+  const handleLoadMore = (): void => {
     setVisibleDevs(visibleDevs + VISIBLE_MAX);
   };
 

src/components/Engines/Engines.test.tsx

@@ -5,7 +5,7 @@ import Engine from './Engines';
 jest.mock('./img/node.png', () => '');
 jest.mock('../Install/img/npm.svg', () => '');
 
-const mockPackageMeta = jest.fn(() => ({
+const mockPackageMeta: jest.Mock = jest.fn(() => ({
   latest: {
     homepage: 'https://verdaccio.tld',
     bugs: {
@@ -38,7 +38,6 @@ describe('<Engines /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Engine />);
@@ -50,7 +49,6 @@ describe('<Engines /> component', () => {
       latest: {},
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Engine />);
@@ -64,7 +62,6 @@ describe('<Engines /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Engine />);

src/components/Footer/Footer.test.tsx

@@ -10,10 +10,8 @@ jest.mock('../../../package.json', () => ({
 describe('<Footer /> component', () => {
   let wrapper;
   beforeEach(() => {
-    // @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
     window.VERDACCIO_VERSION = 'v.1.0.0';
     wrapper = mount(<Footer />);
-    // @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window'
     delete window.VERDACCIO_VERSION;
   });
 

src/components/Footer/Footer.tsx

@@ -21,7 +21,6 @@ const MADEWITH_LABEL = ' Made with';
 const ON_LABEL = 'on';
 const HEARTH_EMOJI = '♥';
 
-// @ts-ignore
 const renderRight = (version = window.VERDACCIO_VERSION): JSX.Element => {
   return (
     <Right>

src/components/Footer/styles.ts

@@ -20,7 +20,6 @@ export const Inner = styled('div')`
     justify-content: flex-end;
     width: 100%;
     ${() => {
-      // @ts-ignore
       return mq.medium(css`
         min-width: 400px;
         max-width: 800px;
@@ -29,7 +28,6 @@ export const Inner = styled('div')`
       `);
     }};
     ${() => {
-      // @ts-ignore
       return mq.large(css`
         max-width: 1240px;
       `);
@@ -42,7 +40,6 @@ export const Left = styled('div')`
     align-items: center;
     display: none;
     ${() => {
-      // @ts-ignore
       return mq.medium(css`
         display: flex;
       `);

src/components/Header/Header.tsx

@@ -184,7 +184,6 @@ class Header extends Component<Props, State> {
     switch (type) {
       case 'help':
         content = (
-          // @ts-ignore
           <StyledExternalLink blank={true} to={'https://verdaccio.org/docs/en/installation'}>
             <IconButton color={'inherit'}>
               <Help />

src/components/Header/styles.ts

@@ -76,9 +76,8 @@ export const NavBar = styled(AppBar)`
     min-height: 60px;
     display: flex;
     justify-content: center;
-    ${() => {
+    ${() =>
-      // @ts-ignore
+      mq.medium(css`
-      return mq.medium(css`
         ${SearchWrapper} {
           display: flex;
         }
@@ -88,26 +87,21 @@ export const NavBar = styled(AppBar)`
         ${MobileNavBar} {
           display: none;
         }
-      `);
+      `)};
-    }};
+    ${() =>
-    ${() => {
+      mq.large(css`
-      // @ts-ignore
-      return mq.large(css`
         ${InnerNavBar} {
           padding: 0 20px;
         }
-      `);
+      `)};
-    }};
+    ${() =>
-    ${() => {
+      mq.xlarge(css`
-      // @ts-ignore
-      return mq.xlarge(css`
         ${InnerNavBar} {
           max-width: 1240px;
           width: 100%;
           margin: 0 auto;
         }
-      `);
+      `)};
-    }};
   }
 `;
 

src/components/Icon/Icon.tsx

@@ -65,14 +65,12 @@ export interface Props {
 }
 
 const Icon: React.FC<Props> = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => {
-  // @ts-ignore
+  const title = capitalize(name.toString());
-  const title = capitalize(name);
   return img ? (
     <ImgWrapper className={className} name={name} pointer={pointer} size={size} title={title} {...props}>
       <Img alt={title} src={Icons[name]} />
     </ImgWrapper>
   ) : (
-    // @ts-ignore
     <Svg className={className} pointer={pointer} size={size} {...props}>
       <title>{title}</title>
       <use xlinkHref={`${Icons[name]}#${name}`} />

src/components/Label/Label.tsx

@@ -9,18 +9,20 @@ interface Props {
   modifiers?: null | undefined;
 }
 
+interface WrapperProps {
+  capitalize: boolean;
+  weight: string;
+  modifiers?: null;
+}
+
 const Wrapper = styled('div')`
-  font-weight: ${({ weight }) => {
+  font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]};
-    // @ts-ignore
+  text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')};
-    return fontWeight[weight];
+  ${({ modifiers }: WrapperProps) => modifiers};
-  }};
-  text-transform: ${({ capitalize }) => (capitalize ? 'capitalize' : 'none')};
-  ${({ modifiers }: Props) => modifiers && modifiers};
 `;
 
 const Label: React.FC<Props> = ({ text = '', capitalize = false, weight = 'regular', ...props }) => {
   return (
-    // @ts-ignore
     <Wrapper capitalize={capitalize} weight={weight} {...props}>
       {text}
     </Wrapper>

src/components/Layout/Layout.tsx

@@ -11,15 +11,18 @@ export const Content = styled('div')({
   },
 });
 
+interface ContainerProps {
+  isLoading: boolean;
+}
+
 export const Container = styled('div')`
   && {
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     overflow: hidden;
-    ${props =>
+    ${({ isLoading }: ContainerProps) =>
-      // @ts-ignore
+      isLoading &&
-      props.isLoading &&
       css`
         ${Content} {
           background-color: #f5f6f8;

src/components/Package/Package.tsx

@@ -150,7 +150,6 @@ const Package: React.FC<PackageInterface> = ({
   };
 
   const renderSecondaryComponent = (): React.ReactNode => {
-    // @ts-ignore
     const tags = keywords.sort().map((keyword, index) => <Tag key={index}>{keyword}</Tag>);
     return (
       <>

src/components/Package/styles.ts

@@ -48,7 +48,6 @@ export const Published = styled('span')({
   },
 });
 
-// @ts-ignore
 export const Text = styled(Label)({
   '&&': {
     fontSize: '12px',

src/components/Repository/Repository.test.tsx

@@ -4,7 +4,7 @@ import Repository from './Repository';
 
 jest.mock('./img/git.png', () => '');
 
-const mockPackageMeta = jest.fn(() => ({
+const mockPackageMeta: jest.Mock = jest.fn(() => ({
   latest: {
     homepage: 'https://verdaccio.tld',
     bugs: {
@@ -37,7 +37,6 @@ describe('<Repository /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Repository />);
@@ -49,7 +48,6 @@ describe('<Repository /> component', () => {
       latest: {},
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Repository />);
@@ -66,7 +64,6 @@ describe('<Repository /> component', () => {
       },
     };
 
-    // @ts-ignore
     mockPackageMeta.mockImplementation(() => packageMeta);
 
     const wrapper = mount(<Repository />);

src/components/Spinner/Spinner.tsx

@@ -8,7 +8,6 @@ interface Props {
 }
 
 const Spinner: React.FC<Props> = ({ size = 50, centered = false }) => (
-  // @ts-ignore
   <Wrapper centered={centered}>
     <Circular size={size} />
   </Wrapper>

src/components/Spinner/styles.ts

@@ -3,13 +3,16 @@ import styled, { css } from 'react-emotion';
 
 import colors from '../../utils/styles/colors';
 
+interface WrapperProps {
+  centered: boolean;
+}
+
 export const Wrapper = styled('div')`
   && {
     display: flex;
     align-items: center;
     justify-content: center;
-    ${props =>
+    ${(props: WrapperProps) =>
-      // @ts-ignore
       props.centered &&
       css`
         position: absolute;

src/utils/api.ts

@@ -43,7 +43,6 @@ class API {
     }
 
     if (!['http://', 'https://', '//'].some(prefix => url.startsWith(prefix))) {
-      // @ts-ignore
       url = window.VERDACCIO_API_URL + url;
     }
 

src/utils/styles/colors.ts

@@ -30,7 +30,6 @@ const colors = {
   // Main colors
   // -------------------------
 
-  // @ts-ignore
   primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
   secondary: '#20232a',
 };

src/utils/styles/media.ts

@@ -8,16 +8,26 @@ export const breakpoints = {
   xlarge: 1275,
 };
 
-const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
+type Sizes = keyof typeof breakpoints;
-  const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
+
-  const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
+type MediaQuery = {
-  accumulator[label] = cls =>
+  [key in Sizes]: (cls: any) => string;
-    css`
+};
-      @media (${prefix + breakpoints[label] + suffix}) {
+
-        ${cls};
+const mq: MediaQuery = Object.keys(breakpoints).reduce(
-      }
+  (accumulator, label) => {
-    `;
+    const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
-  return accumulator;
+    const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
-}, {});
+    accumulator[label] = cls =>
+      css`
+        @media (${prefix + breakpoints[label] + suffix}) {
+          ${cls};
+        }
+      `;
+    return accumulator;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+  {} as MediaQuery
+);
 
 export default mq;

types/index.ts

@@ -7,6 +7,10 @@ export interface VerdaccioOptions {
 declare global {
   interface Window {
     __VERDACCIO_BASENAME_UI_OPTIONS: VerdaccioOptions;
+    VERDACCIO_PRIMARY_COLOR: string;
+    VERDACCIO_LOGO: string;
+    VERDACCIO_SCOPE: string;
+    VERDACCIO_VERSION: string;
     VERDACCIO_API_URL: string;
   }
 }