From 3166673875a636f43c70075260f61c37f920b111 Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 12:57:42 +0200 Subject: [PATCH 01/12] fix: spinner typings --- src/components/Spinner/styles.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/Spinner/styles.ts b/src/components/Spinner/styles.ts index c342171..29fcaae 100644 --- a/src/components/Spinner/styles.ts +++ b/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 => - // @ts-ignore + ${(props: WrapperProps) => props.centered && css` position: absolute; From 32f4389b738bcc60ea6a4bcf25c81caad30a0adc Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 13:03:40 +0200 Subject: [PATCH 02/12] fix: remove unnecessary ts ignore --- src/components/ActionBar/ActionBar.tsx | 1 - src/components/Package/styles.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx index bee45ec..fb6f2d9 100644 --- a/src/components/ActionBar/ActionBar.tsx +++ b/src/components/ActionBar/ActionBar.tsx @@ -107,7 +107,6 @@ class ActionBar extends Component { } else { const fab = {actionItem['icon']}; component.push( - // @ts-ignore <>{this.renderIconsWithLink(link, fab)} diff --git a/src/components/Package/styles.ts b/src/components/Package/styles.ts index 09acf2f..5ae899b 100644 --- a/src/components/Package/styles.ts +++ b/src/components/Package/styles.ts @@ -48,7 +48,6 @@ export const Published = styled('span')({ }, }); -// @ts-ignore export const Text = styled(Label)({ '&&': { fontSize: '12px', From b1804d7644c233f4b6b76377eb9b92364e62721f Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 13:22:36 +0200 Subject: [PATCH 03/12] fix: remove ts ignore from some components --- src/App/App.tsx | 1 - src/components/Label/Label.tsx | 16 +++++++++------- src/components/Layout/Layout.tsx | 9 ++++++--- src/components/Spinner/Spinner.tsx | 1 - 4 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index f9cca35..109be71 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -64,7 +64,6 @@ export default class App extends Component<{}, AppStateInterface> { const context = { isUserLoggedIn, packages, logoUrl, user, scope }; return ( - // @ts-ignore {isLoading ? : {this.renderContent()}} {this.renderLoginModal()} diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 95fa878..a9a4fd0 100644 --- a/src/components/Label/Label.tsx +++ b/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 }) => { - // @ts-ignore - return fontWeight[weight]; - }}; - text-transform: ${({ capitalize }) => (capitalize ? 'capitalize' : 'none')}; - ${({ modifiers }: Props) => modifiers && modifiers}; + font-weight: ${({ weight }: WrapperProps) => fontWeight[weight]}; + text-transform: ${({ capitalize }: WrapperProps) => (capitalize ? 'capitalize' : 'none')}; + ${({ modifiers }: WrapperProps) => modifiers}; `; const Label: React.FC = ({ text = '', capitalize = false, weight = 'regular', ...props }) => { return ( - // @ts-ignore {text} diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index 968e78f..8f2fd91 100644 --- a/src/components/Layout/Layout.tsx +++ b/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 => - // @ts-ignore - props.isLoading && + ${({ isLoading }: ContainerProps) => + isLoading && css` ${Content} { background-color: #f5f6f8; diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx index db4a917..9c59470 100644 --- a/src/components/Spinner/Spinner.tsx +++ b/src/components/Spinner/Spinner.tsx @@ -8,7 +8,6 @@ interface Props { } const Spinner: React.FC = ({ size = 50, centered = false }) => ( - // @ts-ignore From 852f6eeb22be4f9980da6cca6e367b65ca3d5ba7 Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 13:23:11 +0200 Subject: [PATCH 04/12] fix: improve jest mock typings --- src/components/ActionBar/ActionBar.test.tsx | 4 +--- src/components/Engines/Engines.test.tsx | 5 +---- src/components/Repository/Repository.test.tsx | 5 +---- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/src/components/ActionBar/ActionBar.test.tsx b/src/components/ActionBar/ActionBar.test.tsx index fac80e0..b77c026 100644 --- a/src/components/ActionBar/ActionBar.test.tsx +++ b/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(' component', () => { }); test('when there is no action bar data', () => { - // @ts-ignore mockPackageMeta.mockImplementation(() => ({ latest: {}, })); @@ -44,7 +43,6 @@ describe(' component', () => { }); test('when there is a button to download a tarball', () => { - // @ts-ignore mockPackageMeta.mockImplementation(() => ({ latest: { dist: { diff --git a/src/components/Engines/Engines.test.tsx b/src/components/Engines/Engines.test.tsx index 4756588..c59bb8b 100644 --- a/src/components/Engines/Engines.test.tsx +++ b/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(' component', () => { }, }; - // @ts-ignore mockPackageMeta.mockImplementation(() => packageMeta); const wrapper = mount(); @@ -50,7 +49,6 @@ describe(' component', () => { latest: {}, }; - // @ts-ignore mockPackageMeta.mockImplementation(() => packageMeta); const wrapper = mount(); @@ -64,7 +62,6 @@ describe(' component', () => { }, }; - // @ts-ignore mockPackageMeta.mockImplementation(() => packageMeta); const wrapper = mount(); diff --git a/src/components/Repository/Repository.test.tsx b/src/components/Repository/Repository.test.tsx index fafdf7b..ca9204a 100644 --- a/src/components/Repository/Repository.test.tsx +++ b/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(' component', () => { }, }; - // @ts-ignore mockPackageMeta.mockImplementation(() => packageMeta); const wrapper = mount(); @@ -49,7 +48,6 @@ describe(' component', () => { latest: {}, }; - // @ts-ignore mockPackageMeta.mockImplementation(() => packageMeta); const wrapper = mount(); @@ -66,7 +64,6 @@ describe(' component', () => { }, }; - // @ts-ignore mockPackageMeta.mockImplementation(() => packageMeta); const wrapper = mount(); From 7a8b158188b6fa80338ecb5397e1a1722b660556 Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 13:23:38 +0200 Subject: [PATCH 05/12] fix: remove unnecessary ts ignore --- src/components/ActionBar/ActionBar.tsx | 1 - src/components/Header/Header.tsx | 1 - src/components/Icon/Icon.tsx | 4 +--- src/components/Package/Package.tsx | 1 - 4 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/components/ActionBar/ActionBar.tsx b/src/components/ActionBar/ActionBar.tsx index fb6f2d9..79db693 100644 --- a/src/components/ActionBar/ActionBar.tsx +++ b/src/components/ActionBar/ActionBar.tsx @@ -70,7 +70,6 @@ class ActionBar extends Component { } private renderActionBar = ({ packageMeta }) => { - // @ts-ignore const { latest } = packageMeta; if (!latest) { diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 97b7ea6..dc556a1 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -184,7 +184,6 @@ class Header extends Component { switch (type) { case 'help': content = ( - // @ts-ignore diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx index 4c603c9..4bcefb7 100644 --- a/src/components/Icon/Icon.tsx +++ b/src/components/Icon/Icon.tsx @@ -65,14 +65,12 @@ export interface Props { } const Icon: React.FC = ({ className, name, size = 'sm', img = false, pointer = false, ...props }) => { - // @ts-ignore - const title = capitalize(name); + const title = capitalize(name.toString()); return img ? ( {title} ) : ( - // @ts-ignore {title} diff --git a/src/components/Package/Package.tsx b/src/components/Package/Package.tsx index bcbb4a5..be749ba 100644 --- a/src/components/Package/Package.tsx +++ b/src/components/Package/Package.tsx @@ -150,7 +150,6 @@ const Package: React.FC = ({ }; const renderSecondaryComponent = (): React.ReactNode => { - // @ts-ignore const tags = keywords.sort().map((keyword, index) => {keyword}); return ( <> From b35baa069f77d34538ef6f95f3083e2e13ccc01d Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 13:30:01 +0200 Subject: [PATCH 06/12] fix: add new window property to interface definition --- src/App/App.tsx | 4 +--- src/components/Footer/Footer.test.tsx | 2 -- src/utils/styles/colors.ts | 1 - types/index.ts | 4 ++++ 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 109be71..5439da2 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -34,11 +34,9 @@ export interface AppStateInterface { } export default class App extends Component<{}, AppStateInterface> { public state: AppStateInterface = { - // @ts-ignore logoUrl: window.VERDACCIO_LOGO, user: {}, - // @ts-ignore - scope: window.VERDACCIO_SCOPE ? `${window.VERDACCIO_SCOPE}:` : '', + scope: window.VERDACCIO_SCOPE || '', showLoginModal: false, isUserLoggedIn: false, packages: [], diff --git a/src/components/Footer/Footer.test.tsx b/src/components/Footer/Footer.test.tsx index b91efcc..d8f9240 100644 --- a/src/components/Footer/Footer.test.tsx +++ b/src/components/Footer/Footer.test.tsx @@ -10,10 +10,8 @@ jest.mock('../../../package.json', () => ({ describe('
component', () => { let wrapper; beforeEach(() => { - // @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window' window.VERDACCIO_VERSION = 'v.1.0.0'; wrapper = mount(
); - // @ts-ignore : Property 'VERDACCIO_VERSION' does not exist on type 'Window' delete window.VERDACCIO_VERSION; }); diff --git a/src/utils/styles/colors.ts b/src/utils/styles/colors.ts index b4497f2..16f5c30 100644 --- a/src/utils/styles/colors.ts +++ b/src/utils/styles/colors.ts @@ -30,7 +30,6 @@ const colors = { // Main colors // ------------------------- - // @ts-ignore primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40', secondary: '#20232a', }; diff --git a/types/index.ts b/types/index.ts index 68c79cb..d19b664 100644 --- a/types/index.ts +++ b/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; } } From 35d691c1e04de9b34a7ac87a850cacb8697f1bb4 Mon Sep 17 00:00:00 2001 From: Antoine Chalifour Date: Thu, 3 Oct 2019 13:39:10 +0200 Subject: [PATCH 07/12] fix: fix DependencyBlock props interface --- src/components/Dependencies/Dependencies.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/Dependencies/Dependencies.tsx b/src/components/Dependencies/Dependencies.tsx index 4f78649..ca3ad84 100644 --- a/src/components/Dependencies/Dependencies.tsx +++ b/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 selectedDepndency = dependencyMap[value]; - if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) { - // @ts-ignore - result.push(); - } - return result; - }, []); + const dependencyList = Object.keys(dependencyMap).reduce( + (result, value, key) => { + const selectedDepndency = dependencyMap[value]; + if (selectedDepndency && this.checkDependencyLength(selectedDepndency)) { + result.push(); + } + return result; + }, + [] as JSX.Element[] + ); if (dependencyList.length) { return {dependencyList}; From f6eb74736a3d955ec699bf717c8475096b85586e Mon Sep 17 00:00:00 2001 From: antoinechalifour Date: Thu, 3 Oct 2019 20:01:43 +0200 Subject: [PATCH 08/12] fix(App): ts ignore --- src/App/App.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/App/App.tsx b/src/App/App.tsx index 5439da2..65ac3e0 100644 --- a/src/App/App.tsx +++ b/src/App/App.tsx @@ -29,7 +29,7 @@ export interface AppStateInterface { scope: string; showLoginModal: boolean; isUserLoggedIn: boolean; - packages: []; + packages: any[]; isLoading: boolean; } export default class App extends Component<{}, AppStateInterface> { @@ -85,11 +85,9 @@ export default class App extends Component<{}, AppStateInterface> { public loadOnHandler = async () => { try { - // @ts-ignore - this.req = await API.request('packages', 'GET'); + const packages = await API.request('packages', 'GET'); this.setState({ - // @ts-ignore - packages: this.req, + packages, isLoading: false, }); } catch (error) { @@ -113,7 +111,6 @@ export default class App extends Component<{}, AppStateInterface> { */ public handleToggleLoginModal = () => { this.setState(prevState => ({ - // @ts-ignore showLoginModal: !prevState.showLoginModal, })); }; @@ -123,7 +120,6 @@ export default class App extends Component<{}, AppStateInterface> { * Required by:
*/ public handleDoLogin = async (usernameValue, passwordValue) => { - // @ts-ignore const { username, token, error } = await makeLogin(usernameValue, passwordValue); if (username && token) { @@ -184,7 +180,6 @@ export default class App extends Component<{}, AppStateInterface> { public renderHeader = (): ReactElement => { const { logoUrl, - // @ts-ignore user: { username }, scope, } = this.state; From 1fb0bf96d11f5d8c7ac8109f9140756920fced4a Mon Sep 17 00:00:00 2001 From: antoinechalifour Date: Thu, 3 Oct 2019 20:02:51 +0200 Subject: [PATCH 09/12] fix(Footer): remove unnecessary ts ignore --- src/components/Footer/Footer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index fe1c4cf..7a6e5d0 100644 --- a/src/components/Footer/Footer.tsx +++ b/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 ( From a8eb1f36fc871ef7bc0e4ad35527b93d1c4a4467 Mon Sep 17 00:00:00 2001 From: antoinechalifour Date: Thu, 3 Oct 2019 20:11:06 +0200 Subject: [PATCH 10/12] fix(api): remove unnecessary ts ignore --- src/utils/api.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/utils/api.ts b/src/utils/api.ts index 1dd45a4..61bfd4c 100644 --- a/src/utils/api.ts +++ b/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; } From 6f52838531519c79274ef4dff51f403ecf1d8518 Mon Sep 17 00:00:00 2001 From: antoinechalifour Date: Thu, 3 Oct 2019 20:11:14 +0200 Subject: [PATCH 11/12] fix: media query ts ignore --- src/components/Footer/styles.ts | 3 --- src/components/Header/styles.ts | 24 +++++++++--------------- src/utils/styles/media.ts | 32 +++++++++++++++++++++----------- 3 files changed, 30 insertions(+), 29 deletions(-) diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts index 5207935..0396a03 100644 --- a/src/components/Footer/styles.ts +++ b/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; `); diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts index dcbc49a..79cc50e 100644 --- a/src/components/Header/styles.ts +++ b/src/components/Header/styles.ts @@ -76,9 +76,8 @@ export const NavBar = styled(AppBar)` min-height: 60px; display: flex; justify-content: center; - ${() => { - // @ts-ignore - return mq.medium(css` + ${() => + mq.medium(css` ${SearchWrapper} { display: flex; } @@ -88,26 +87,21 @@ export const NavBar = styled(AppBar)` ${MobileNavBar} { display: none; } - `); - }}; - ${() => { - // @ts-ignore - return mq.large(css` + `)}; + ${() => + mq.large(css` ${InnerNavBar} { padding: 0 20px; } - `); - }}; - ${() => { - // @ts-ignore - return mq.xlarge(css` + `)}; + ${() => + mq.xlarge(css` ${InnerNavBar} { max-width: 1240px; width: 100%; margin: 0 auto; } - `); - }}; + `)}; } `; diff --git a/src/utils/styles/media.ts b/src/utils/styles/media.ts index 7c3114e..a626014 100644 --- a/src/utils/styles/media.ts +++ b/src/utils/styles/media.ts @@ -8,16 +8,26 @@ export const breakpoints = { xlarge: 1275, }; -const mq = Object.keys(breakpoints).reduce((accumulator, label) => { - const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:'; - const suffix = typeof breakpoints[label] === 'string' ? '' : 'px'; - accumulator[label] = cls => - css` - @media (${prefix + breakpoints[label] + suffix}) { - ${cls}; - } - `; - return accumulator; -}, {}); +type Sizes = keyof typeof breakpoints; + +type MediaQuery = { + [key in Sizes]: (cls: any) => string; +}; + +const mq: MediaQuery = Object.keys(breakpoints).reduce( + (accumulator, label) => { + const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:'; + 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; From f4da5e692d0362c63d0c0cd0fd6bd7d4c2758343 Mon Sep 17 00:00:00 2001 From: antoinechalifour Date: Thu, 3 Oct 2019 20:17:27 +0200 Subject: [PATCH 12/12] fix(Developers): remove compilation warnings --- src/components/Developers/Developers.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Developers/Developers.tsx b/src/components/Developers/Developers.tsx index 2fd3e31..69a1ea6 100644 --- a/src/components/Developers/Developers.tsx +++ b/src/components/Developers/Developers.tsx @@ -18,7 +18,7 @@ const Developers: FC = ({ type, visibleMax }) => { const [visibleDevs, setVisibleDevs] = React.useState(visibleMax || VISIBLE_MAX); const { packageMeta } = React.useContext(DetailContext); - const handleLoadMore = () => { + const handleLoadMore = (): void => { setVisibleDevs(visibleDevs + VISIBLE_MAX); };