Refactor: migrating Flow to Typescript

package.json

@@ -16,6 +16,11 @@
     "@material-ui/core": "3.9.0",
     "@material-ui/icons": "3.0.2",
     "@octokit/rest": "16.23.2",
+    "@types/material-ui": "0.21.6",
+    "@types/node": "12.0.0",
+    "@types/react": "16.8.15",
+    "@types/react-dom": "16.8.4",
+    "@types/react-router-dom": "4.3.2",
     "@verdaccio/babel-preset": "0.1.0",
     "@verdaccio/types": "5.0.0-beta.4",
     "autosuggest-highlight": "3.1.1",
@@ -88,7 +93,14 @@
     "stylelint-scss": "3.5.4",
     "stylelint-webpack-plugin": "0.10.5",
     "supertest": "3.4.2",
+    "ts-loader": "5.4.5",
+    "tslint": "5.16.0",
+    "tslint-config-prettier": "1.18.0",
+    "tslint-plugin-prettier": "2.0.1",
+    "tslint-react": "4.0.0",
     "typeface-roboto": "0.0.54",
+    "typescript": "3.4.5",
+    "typescript-tslint-plugin": "0.3.1",
     "url-loader": "1.1.2",
     "verdaccio": "4.0.0-alpha.7",
     "verdaccio-auth-memory": "0.0.4",
@@ -107,6 +119,7 @@
     "verdaccio-theme"
   ],
   "scripts": {
+    "tslint": "tslint --project . --format verbose",
     "flow": "flow check",
     "release": "standard-version -a -s",
     "test:clean": "npx jest --clearCache",

src/config/env.js

@@ -1,6 +1,5 @@
 /**
  * @prettier
- * @flow
  */
 
 const path = require('path');

src/lib/constants.js → src/lib/constants.ts

@@ -2,8 +2,6 @@
  * @prettier
  */
 
-// @flow
-
 export const DIST_TAGS = 'dist-tags';
 
 export const HEADERS = {

src/webui/components/CopyToClipBoard/index.js → src/webui/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -1,29 +1,27 @@
 /**
  * @prettier
- * @flow
  */
 
-import React from 'react';
-import type { Node } from 'react';
-
+import Tooltip from '@material-ui/core/Tooltip';
 import FileCopy from '@material-ui/icons/FileCopy';
-import Tooltip from '@material-ui/core/Tooltip/index';
+import React from 'react';
 
-import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
 import { copyToClipBoardUtility } from '../../utils/cli-utils';
 import { TEXT } from '../../utils/constants';
+
+import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
 import { IProps } from './types';
 
-const CopyToClipBoard = ({ text, children }: IProps): Node => {
+const CopyToClipBoard: React.FC<IProps> = ({ text, children }) => {
   const renderToolTipFileCopy = () => (
-    <Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
+    <Tooltip disableFocusListener title={TEXT.CLIPBOARD_COPY}>
       <CopyIcon onClick={copyToClipBoardUtility(text)}>
         <FileCopy />
       </CopyIcon>
     </Tooltip>
   );
 
-  const renderText = children => {
+  const renderText = (children: any) => {
     if (children) {
       return <ClipBoardCopyText>{children}</ClipBoardCopyText>;
     }

src/webui/components/CopyToClipBoard/index.ts

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

src/webui/components/CopyToClipBoard/styles.js → src/webui/components/CopyToClipBoard/styles.ts

@@ -1,15 +1,15 @@
+import IconButton from '@material-ui/core/IconButton';
 import styled from 'react-emotion';
-import IconButton from '@material-ui/core/IconButton/index';
 
-export const ClipBoardCopy = styled.div`
+export const ClipBoardCopy = styled('div')`
   && {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 `;
 
-export const ClipBoardCopyText = styled.span`
+export const ClipBoardCopyText = styled('span')`
   && {
     display: inline-block;
     text-overflow: ellipsis;

src/webui/components/CopyToClipBoard/types.js → src/webui/components/CopyToClipBoard/types.ts

@@ -1,6 +1,5 @@
 /**
  * @prettier
- * @flow
  */
 
 export interface IProps {

src/webui/components/Help/Help.tsx

@@ -0,0 +1,50 @@
+/**
+ * @prettier
+ */
+
+import Button from '@material-ui/core/Button';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import Typography from '@material-ui/core/Typography';
+import React from 'react';
+
+import { getRegistryURL } from '../../utils/url';
+import CopyToClipBoard from '../CopyToClipBoard';
+
+import { CardStyled as Card, HelpTitle } from './styles';
+
+function renderHeadingClipboardSegments(title: string, text: string) {
+  return (
+    <>
+      <Typography variant={'body2'}>{title}</Typography>
+      <CopyToClipBoard text={text} />
+    </>
+  );
+}
+
+const Help: React.FC = () => {
+  const registryUrl = getRegistryURL();
+
+  return (
+    <Card id="help-card">
+      <CardContent>
+        <Typography component="h2" gutterBottom id="help-card__title" variant="headline">
+          No Package Published Yet.
+        </Typography>
+        <HelpTitle color="textSecondary" gutterBottom>
+          To publish your first package just:
+        </HelpTitle>
+        {renderHeadingClipboardSegments('1. Login', `npm adduser --registry ${registryUrl}`)}
+        {renderHeadingClipboardSegments('2. Publish', `npm publish --registry ${registryUrl}`)}
+        <Typography variant="body2">3. Refresh this page.</Typography>
+      </CardContent>
+      <CardActions>
+        <Button color="primary" href="https://verdaccio.org/docs/en/installation" size="small" target="_blank">
+          Learn More
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default Help;

src/webui/components/Help/index.ts

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

src/webui/components/Help/styles.js → src/webui/components/Help/styles.ts

@@ -3,9 +3,9 @@
  * @flow
  */
 
+import Card from '@material-ui/core/Card';
+import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';
-import Card from '@material-ui/core/Card/index';
-import Typography from '@material-ui/core/Typography/index';
 
 export const CardStyled = styled(Card)`
   && {

src/webui/components/Install/index.js → src/webui/components/Install/Install.tsx

@@ -2,40 +2,44 @@
  * @prettier
  */
 
+import List from '@material-ui/core/List';
+import ListItemText from '@material-ui/core/ListItemText';
 import React, { Component } from 'react';
 
-import List from '@material-ui/core/List/index';
-import ListItemText from '@material-ui/core/ListItemText/index';
-
-import { DetailContextConsumer } from '../../pages/version/index';
+// @ts-ignore
+import { DetailContextConsumer } from '../../pages/version';
 import CopyToClipBoard from '../CopyToClipBoard';
 
-import { Heading, InstallItem, PackageMangerAvatar } from './styles';
 // logos of package managers
+//@ts-ignore // TODO: add svg type
 import npm from './img/npm.svg';
+//@ts-ignore // TODO: add svg type
 import pnpm from './img/pnpm.svg';
+//@ts-ignore // TODO: add svg type
 import yarn from './img/yarn.svg';
 
+import { Heading, InstallItem, PackageMangerAvatar } from './styles';
+
 class Install extends Component {
-  render() {
+  public render() {
     return (
       <DetailContextConsumer>
-        {context => {
+        {(context: any) => {
           return this.renderCopyCLI(context);
         }}
       </DetailContextConsumer>
     );
   }
 
-  renderCopyCLI = ({ packageName }) => {
+  public renderCopyCLI = ({ packageName }: { packageName: string }) => {
     return (
       <>
         <List subheader={<Heading variant={'subheading'}>{'Installation'}</Heading>}>{this.renderListItems(packageName)}</List>
       </>
     );
   };
 
-  renderListItems = packageName => {
+  public renderListItems = (packageName: string) => {
     return (
       <>
         <InstallItem>

src/webui/components/Install/index.ts

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

src/webui/components/Install/styles.js → src/webui/components/Install/styles.ts

@@ -1,12 +1,11 @@
 /**
  * @prettier
- * @flow
  */
 
+import Avatar from '@material-ui/core/Avatar';
+import ListItem from '@material-ui/core/ListItem';
+import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';
-import Typography from '@material-ui/core/Typography/index';
-import ListItem from '@material-ui/core/ListItem/index';
-import Avatar from '@material-ui/core/Avatar/index';
 
 export const Heading = styled(Typography)`
   && {

src/webui/components/Logo/index.js → src/webui/components/Logo/Logo.ts

@@ -1,12 +1,13 @@
 /**
  * @prettier
- * @flow
  */
 
 import styled, { css } from 'react-emotion';
+
+// @ts-ignore
 import logo from './img/logo.svg';
 
-const Logo = styled.div`
+const Logo = styled('div')`
   && {
     display: inline-block;
     vertical-align: middle;
@@ -18,6 +19,7 @@ const Logo = styled.div`
     width: 40px;
     height: 40px;
     ${props =>
+      // @ts-ignore
       props.md &&
       css`
         width: 90px;

src/webui/components/Logo/index.ts

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

src/webui/components/NotFound/index.js → src/webui/components/NotFound/NotFound.tsx

@@ -2,19 +2,21 @@
  * @prettier
  */
 
+import ListItem from '@material-ui/core/ListItem';
+import Typography from '@material-ui/core/Typography';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
 import React from 'react';
-import { withRouter } from 'react-router-dom';
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth/index';
-import ListItem from '@material-ui/core/ListItem/index';
-import Typography from '@material-ui/core/Typography/index';
-import { Wrapper, Inner, EmptyPackage, Heading, Card, List } from './styles';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+
+// @ts-ignore
 import PackageImg from './img/package.svg';
+import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles';
 
 export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
 
 // eslint-disable-next-line react/prop-types
-const NotFound = ({ history, width }) => {
-  const handleGoTo = to => () => {
+const NotFound: React.FC<RouteComponentProps & { width: any }> = ({ history, width }) => {
+  const handleGoTo = (to: string) => () => {
     history.push(to);
   };
 
@@ -24,17 +26,17 @@ const NotFound = ({ history, width }) => {
 
   const renderList = () => (
     <List>
-      <ListItem button={true} divider={true} onClick={handleGoTo('/')}>
-        {'Home'}
+      <ListItem button divider onClick={handleGoTo('/')}>
+        Home
       </ListItem>
-      <ListItem button={true} divider={true} onClick={handleGoBack()}>
-        {'Back'}
+      <ListItem button divider onClick={handleGoBack()}>
+        Back
       </ListItem>
     </List>
   );
 
   const renderSubTitle = () => (
-    <Typography variant={'subtitle1'}>
+    <Typography variant="subtitle1">
       <div>{"The page you're looking for doesn't exist."}</div>
       <div>{'Perhaps these links will help find what you are looking for:'}</div>
     </Typography>
@@ -43,8 +45,8 @@ const NotFound = ({ history, width }) => {
   return (
     <Wrapper>
       <Inner>
-        <EmptyPackage alt={'404 - Page not found'} src={PackageImg} />
-        <Heading className={'not-found-text'} variant={isWidthUp('sm', width) ? 'h2' : 'h4'}>
+        <EmptyPackage alt="404 - Page not found" src={PackageImg} />
+        <Heading className="not-found-text" variant={isWidthUp('sm', width) ? 'h2' : 'h4'}>
           {NOT_FOUND_TEXT}
         </Heading>
         {renderSubTitle()}

src/webui/components/NotFound/index.ts

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