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

@@ -0,0 +1,76 @@
+import React, { Component } from 'react';
+
+import Avatar from '@material-ui/core/Avatar';
+import Add from '@material-ui/icons/Add';
+import Tooltip from '@material-ui/core/Tooltip';
+
+import { DetailContextConsumer } from '../../pages/version/Version';
+import { Details, Heading, Content, Fab } from './styles';
+import { isEmail } from '../../utils/url';
+
+interface Props {
+  type: 'contributors' | 'maintainers';
+}
+
+class Developers extends Component<Props, any> {
+  state = {
+    visibleDevs: 6,
+  };
+
+  render() {
+    return (
+      <DetailContextConsumer>
+        {({ packageMeta }: any) => {
+          const { type } = this.props;
+          const developerType = packageMeta.latest[type];
+          if (!developerType || developerType.length === 0) return null;
+          return this.renderDevelopers(developerType, packageMeta);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  handleLoadMore = () => {
+    this.setState(prev => ({ visibleDevs: prev.visibleDevs + 6 }));
+  };
+
+  renderDevelopers = (developers, packageMeta) => {
+    const { type } = this.props;
+    const { visibleDevs } = this.state;
+    return (
+      <>
+        <Heading variant={'subheading'}>{type}</Heading>
+        <Content>
+          {developers.slice(0, visibleDevs).map(developer => (
+            <Details key={developer.email}>{this.renderDeveloperDetails(developer, packageMeta)}</Details>
+          ))}
+          {visibleDevs < developers.length && (
+            <Fab onClick={this.handleLoadMore} size="small">
+              <Add />
+            </Fab>
+          )}
+        </Content>
+      </>
+    );
+  };
+
+  renderLinkForMail(email, avatarComponent, packageName, version) {
+    if (!email || isEmail(email) === false) {
+      return avatarComponent;
+    }
+    return (
+      <a href={`mailto:${email}?subject=${packageName}@${version}`} target={'_top'}>
+        {avatarComponent}
+      </a>
+    );
+  }
+
+  renderDeveloperDetails = ({ name, avatar, email }, packageMeta) => {
+    const { name: packageName, version } = packageMeta.latest;
+
+    const avatarComponent = <Avatar aria-label={name} src={avatar} />;
+    return <Tooltip title={name}>{this.renderLinkForMail(email, avatarComponent, packageName, version)}</Tooltip>;
+  };
+}
+
+export default Developers;

src/components/Developers/index.ts

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

src/components/Developers/styles.ts

@@ -0,0 +1,34 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiFab } from '@material-ui/core/Fab';
+import colors from '../../utils/styles/colors';
+
+export const Details = styled('span')`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+export const Content = styled('div')`
+  margin: 10px 0 10px 0;
+  display: flex;
+  flex-wrap: wrap;
+  > * {
+    margin: 5px;
+  }
+`;
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+    margin-bottom: 10px;
+    text-transform: capitalize;
+  }
+`;
+
+export const Fab = styled(MuiFab)`
+  && {
+    background-color: ${colors.primary};
+    color: ${colors.white};
+  }
+`;