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/DetailSidebar/DetailSidebar.tsx

@@ -0,0 +1,87 @@
+import React, { Component, ReactElement } from 'react';
+
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import List from '@material-ui/core/List';
+
+import ActionBar from '../ActionBar/ActionBar';
+import Author from '../Author';
+import Developers from '../Developers';
+import Dist from '../Dist/Dist';
+import Engine from '../Engines/Engines';
+import Install from '../Install';
+import Repository from '../Repository/Repository';
+
+import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
+
+import { TitleListItem, TitleListItemText } from './styles';
+
+class DetailSidebar extends Component {
+  public render(): ReactElement<HTMLElement> {
+    return <DetailContextConsumer>{context => this.renderSideBar(context as VersionPageConsumerProps)}</DetailContextConsumer>;
+  }
+
+  private renderSideBar = ({ packageName, packageMeta }): ReactElement<HTMLElement> => {
+    return (
+      <div className={'sidebar-info'}>
+        <Card>
+          <CardContent>
+            {this.renderTitle(packageName, packageMeta)}
+            {this.renderActionBar()}
+            {this.renderCopyCLI()}
+            {this.renderRepository()}
+            {this.renderEngine()}
+            {this.renderDist()}
+            {this.renderAuthor()}
+            {this.renderMaintainers()}
+            {this.renderContributors()}
+          </CardContent>
+        </Card>
+      </div>
+    );
+  };
+
+  private renderTitle = (packageName, packageMeta) => {
+    return (
+      <List className="detail-info">
+        <TitleListItem alignItems="flex-start">
+          <TitleListItemText primary={<b>{packageName}</b>} secondary={packageMeta.latest.description} />
+        </TitleListItem>
+      </List>
+    );
+  };
+
+  private renderCopyCLI = () => {
+    return <Install />;
+  };
+
+  private renderMaintainers = () => {
+    return <Developers type="maintainers" />;
+  };
+
+  private renderContributors = () => {
+    return <Developers type="contributors" />;
+  };
+
+  private renderRepository = () => {
+    return <Repository />;
+  };
+
+  private renderAuthor = () => {
+    return <Author />;
+  };
+
+  private renderEngine = () => {
+    return <Engine />;
+  };
+
+  private renderDist = () => {
+    return <Dist />;
+  };
+
+  private renderActionBar = () => {
+    return <ActionBar />;
+  };
+}
+
+export default DetailSidebar;

src/components/DetailSidebar/index.ts

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

src/components/DetailSidebar/styles.ts

@@ -0,0 +1,30 @@
+import styled from 'react-emotion';
+import Avatar from '@material-ui/core/Avatar';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+
+import colors from '../../utils/styles/colors';
+
+export const TitleListItem = styled(ListItem)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+    padding-bottom: 0;
+  }
+`;
+
+export const TitleListItemText = styled(ListItemText)`
+  && {
+    padding-left: 0;
+    padding-right: 0;
+    padding-top: 8px;
+  }
+`;
+
+export const TitleAvatar = styled(Avatar)`
+  && {
+    color: ${colors.greySuperLight};
+    background-color: ${colors.primary};
+    text-transform: capitalize;
+  }
+`;