feat: migrating flow to typescript (#47)

This PR convert the code base to Typescript, the changes are the following:

- migrate code base to Typescript (3.4.x)
- enable `eslint` and `@typescript-eslint/eslint-plugin` (warnings still need to be addressed in future pull request
- update relevant dependencies for this PR (linting, etc)
- enable `bundlezise` (it was disabled for some reason)

* refactor: refactoring to typescript

* refactor: migrating to typescript

* refactor: applied feedbacks

* fix: fixed conflicts

* refactored: changed registry

* refactor: updated registry & removed unnecessary lib

* fix: fixed registry ur

* fix: fixed page load

* refactor: refactored footer wip

* refactor: converting to ts..wip

* refactor: converting to ts. wip

* refactor: converting to ts. wip

* refactor: converting to ts

* refactor: converting to ts

* fix: fixed load errors

* refactor: converted files to ts

* refactor: removed flow from tests

* fix: removed transpiled files

* refactor: added ts-ignore

* fix: fixed errors

* fix: fixed types

* fix: fixing jest import -.-

* fix: fixing lint errors

* fix: fixing lint errors

* fix: fixed lint errors

* refactor: removed unnecessary tsconfig's config

* fix: fixing errors

* fix: fixed warning

* fix: fixed test

* refactor: wip

* refactor: wip

* refactor: wip

* fix: fixing tests: wip

* wip

* wip

* fix: fixed search test

* wip

* fix: fixing lint errors

* fix: re-added stylelint

* refactor: updated stylelint script

* fix: fixed: 'styles.js'  were found.

* fix: fixed Search tests

* chore: enable eslint

eslint needs expecitely to know which file has to lint, by default is JS, in this case we need also ts,tsx files eslint . --ext .js,.ts

* chore: vcode eslint settings

* chore: restore eslint previous conf

* chore: clean jest config

* chore: fix eslint warnings

* chore: eslint errors cleared

chore: clean warnings

chore: remove github actions test phases

chore: remove dupe rule

* chore: update handler name

* chore: restore logo from img to url css prop

- loading images with css is more performant than using img html tags, switching this might be a breaking change
- restore no-empty-source seems the linting do not accept false
- update snapshots
- remove @material-ui/styles

* chore: update stylelint linting

* chore: update stylelint linting

* chore: fix a mistake on move tabs to a function

* chore: eanble bundlezie

* chore: use default_executor in circleci

* chore: update readme

src/pages/home/Home.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import PackageList from '../../components/PackageList';
+
+interface Props {
+  isUserLoggedIn: boolean;
+  packages: any[];
+}
+
+const Home: React.FC<Props> = ({ packages }) => (
+  <div className="container content">
+    <PackageList packages={packages} />
+  </div>
+);
+
+export default Home;

src/pages/home/home.scss

@@ -0,0 +1,16 @@
+@import '../../styles/variables';
+
+.alertError {
+    background-color: $red !important;
+    min-width: inherit !important;
+}
+
+.alertErrorMsg {
+    display: flex;
+    align-items: center;
+}
+
+.alertIcon {
+    opacity: 0.9;
+    margin-right: 8px;
+}

src/pages/home/index.ts

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

src/pages/version/Version.tsx

@@ -0,0 +1,147 @@
+import React, { Component, ReactElement, Consumer, Provider } from 'react';
+import Grid from '@material-ui/core/Grid';
+import Loading from '../../components/Loading/Loading';
+import DetailContainer from '../../components/DetailContainer/DetailContainer';
+import DetailSidebar from '../../components/DetailSidebar/DetailSidebar';
+import { callDetailPage, DetailPage } from '../../utils/calls';
+import { getRouterPackageName } from '../../utils/package';
+import NotFound from '../../components/NotFound';
+
+export interface DetailContextProps {
+  packageMeta: any;
+  readMe: any;
+  packageName: string;
+  enableLoading: () => void;
+}
+
+export const DetailContext = React.createContext<DetailContextProps | null>(null);
+
+export interface VersionPageConsumerProps {
+  packageMeta: any;
+  readMe: any;
+  packageName: any;
+  enableLoading: any;
+}
+
+export const DetailContextProvider: Provider<VersionPageConsumerProps | null> = DetailContext.Provider;
+export const DetailContextConsumer: Consumer<VersionPageConsumerProps | null> = DetailContext.Consumer;
+
+class VersionPage extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      readMe: '',
+      packageName: getRouterPackageName(props.match),
+      packageMeta: null,
+      isLoading: true,
+      notFound: false,
+    };
+  }
+
+  public static getDerivedStateFromProps(nextProps: any, prevState: any): any {
+    const { match } = nextProps;
+    const packageName = getRouterPackageName(match);
+
+    if (packageName !== prevState.packageName) {
+      try {
+        return {
+          packageName,
+          isLoading: false,
+        };
+      } catch (err) {
+        return {
+          notFound: true,
+          isLoading: false,
+        };
+      }
+    } else {
+      return null;
+    }
+  }
+
+  public async componentDidMount(): Promise<void> {
+    await this.loadPackageInfo();
+  }
+
+  /* eslint no-unused-vars: 0 */
+  public async componentDidUpdate(nextProps: any, prevState: any): Promise<void> {
+    const { packageName } = this.state;
+    if (packageName !== prevState.packageName) {
+      const { readMe, packageMeta } = await callDetailPage(packageName);
+      this.setState({
+        readMe,
+        packageMeta,
+        packageName,
+        notFound: false,
+        isLoading: false,
+      });
+    }
+  }
+
+  public render(): ReactElement<HTMLElement> {
+    const { isLoading, packageMeta, readMe, packageName } = this.state;
+
+    if (isLoading) {
+      return <Loading />;
+    } else if (!packageMeta) {
+      return <NotFound />;
+    } else {
+      return (
+        <DetailContextProvider value={{ packageMeta, readMe, packageName, enableLoading: this.enableLoading }}>
+          <Grid className={'container content'} container={true} spacing={0}>
+            <Grid item={true} xs={8}>
+              {this.renderDetail()}
+            </Grid>
+            <Grid item={true} xs={4}>
+              {this.renderSidebar()}
+            </Grid>
+          </Grid>
+        </DetailContextProvider>
+      );
+    }
+  }
+
+  public async loadPackageInfo(): Promise<void> {
+    const { packageName } = this.state;
+    // FIXME: use utility
+    document.title = `Verdaccio - ${packageName}`;
+
+    this.setState({
+      readMe: '',
+    });
+
+    try {
+      const { readMe, packageMeta } = await callDetailPage(packageName);
+      this.setState({
+        readMe,
+        packageMeta,
+        packageName,
+        notFound: false,
+        isLoading: false,
+      });
+    } catch (err) {
+      this.setState({
+        notFound: true,
+        packageName,
+        isLoading: false,
+      });
+    }
+  }
+
+  public enableLoading = () => {
+    this.setState({
+      isLoading: true,
+    });
+  };
+
+  public renderDetail(): ReactElement<HTMLElement> {
+    return <DetailContainer />;
+  }
+
+  public renderSidebar(): ReactElement<HTMLElement> {
+    return <DetailSidebar />;
+  }
+}
+
+export default VersionPage;

src/pages/version/index.ts

@@ -0,0 +1 @@
+export { default, DetailContextProps } from './Version';

src/pages/version/styles.ts

@@ -0,0 +1,12 @@
+import styled from 'react-emotion';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import colors from '../../utils/styles/colors';
+import { fontSize } from '../../utils/styles/sizes';
+
+export const Title = styled(DialogTitle)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+    font-size: ${fontSize.lg};
+  }
+`;