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/components/Dependencies/Dependencies.tsx

@@ -0,0 +1,108 @@
+import React, { Component, Fragment, ReactElement } from 'react';
+import { withRouter } from 'react-router-dom';
+import CardContent from '@material-ui/core/CardContent';
+
+import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
+
+import { CardWrap, Heading, Tags, Tag } from './styles';
+import NoItems from '../NoItems';
+
+class DepDetail extends Component<any, any> {
+  constructor(props: any) {
+    super(props);
+    const { name, version } = this.props;
+
+    this.state = {
+      name,
+      version,
+    };
+  }
+
+  public render(): ReactElement<HTMLElement> {
+    const { name, version } = this.state;
+    const tagText = `${name}@${version}`;
+    return <Tag className={'dep-tag'} clickable={true} component={'div'} label={tagText} onClick={this.handleOnClick} />;
+  }
+
+  private handleOnClick = () => {
+    const { name } = this.state;
+    const { onLoading, history } = this.props;
+
+    onLoading();
+    history.push(`/-/web/detail/${name}`);
+  };
+}
+
+const WrapperDependencyDetail = withRouter(DepDetail);
+
+class DependencyBlock extends Component<any, any> {
+  public render(): ReactElement<HTMLElement> {
+    const { dependencies, title } = this.props;
+    const deps = Object.entries(dependencies);
+
+    return (
+      <DetailContextConsumer>
+        {({ enableLoading }: any) => {
+          return (
+            <CardWrap>
+              <CardContent>
+                <Heading variant="subheading">{`${title} (${deps.length})`}</Heading>
+                <Tags>{this.renderTags(deps, enableLoading)}</Tags>
+              </CardContent>
+            </CardWrap>
+          );
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  private renderTags = (deps: any, enableLoading: any) =>
+    deps.map(dep => {
+      const [name, version] = dep;
+
+      return <WrapperDependencyDetail key={name} name={name} onLoading={enableLoading} version={version} />;
+    });
+}
+
+class Dependencies extends Component<any, any> {
+  public state = {
+    tabPosition: 0,
+  };
+
+  public render(): ReactElement<HTMLElement> {
+    return (
+      <DetailContextConsumer>
+        {packageMeta => {
+          return this.renderDependencies(packageMeta as VersionPageConsumerProps);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  private checkDependencyLength(dependency: Record<string, any> = {}): boolean {
+    return Object.keys(dependency).length > 0;
+  }
+
+  private renderDependencies({ packageMeta }): ReactElement<HTMLElement> {
+    const { latest } = packageMeta;
+    const { dependencies, devDependencies, peerDependencies, name } = latest;
+
+    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(<DependencyBlock className="dependency-block" dependencies={selectedDepndency} key={key} title={value} />);
+      }
+      return result;
+    }, []);
+
+    if (dependencyList.length) {
+      return <Fragment>{dependencyList}</Fragment>;
+    }
+    return <NoItems className="no-dependencies" text={`${name} has no dependencies.`} />;
+  }
+}
+
+export default Dependencies;

src/components/Dependencies/index.ts

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

src/components/Dependencies/styles.ts

@@ -0,0 +1,32 @@
+import styled from 'react-emotion';
+import Card from '@material-ui/core/Card';
+import Typography from '@material-ui/core/Typography';
+import Chip from '@material-ui/core/Chip';
+
+export const CardWrap = styled(Card)`
+  && {
+    margin: 0 0 16px;
+  }
+`;
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    text-transform: capitalize;
+  }
+`;
+
+export const Tags = styled('div')`
+  && {
+    display: flex;
+    justify-content: start;
+    flex-wrap: wrap;
+    margin: 0 -5px;
+  }
+`;
+
+export const Tag = styled(Chip)`
+  && {
+    margin: 5px;
+  }
+`;

src/components/Dependencies/types.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+
+export interface Props {
+  children: ReactNode;
+  open: boolean;
+  onClose: () => void;
+}