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/Versions/Versions.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import Versions from './Versions';
+
+describe('<Versions /> component', () => {
+  test('should render the component in default state', () => {
+    const wrapper = shallow(<Versions />);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

src/components/Versions/Versions.tsx

@@ -0,0 +1,61 @@
+import { DetailContextConsumer } from '../../pages/version/Version';
+import { formatDateDistance } from '../../utils/package';
+import { Heading, Spacer, ListItemText } from './styles';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import React, { ReactElement } from 'react';
+import { DIST_TAGS } from '../../../lib/constants';
+
+const NOT_AVAILABLE = 'Not available';
+
+class Versions extends React.PureComponent<any> {
+  public render(): ReactElement<HTMLDivElement> {
+    return (
+      <DetailContextConsumer>
+        {context => {
+          return context && context.packageMeta && this.renderContent(context.packageMeta);
+        }}
+      </DetailContextConsumer>
+    );
+  }
+
+  public renderPackageList = (packages: any, isVersion: boolean = false, timeMap: Record<string, any> = {}): ReactElement<HTMLDivElement> => {
+    return (
+      <List>
+        {Object.keys(packages)
+          .reverse()
+          .map(version => (
+            <ListItem className="version-item" key={version}>
+              <ListItemText>{version}</ListItemText>
+              <Spacer />
+              {isVersion && <ListItemText>{timeMap[version] ? `${formatDateDistance(timeMap[version])} ago` : NOT_AVAILABLE}</ListItemText>}
+              {isVersion === false && <ListItemText>{packages[version]}</ListItemText>}
+            </ListItem>
+          ))}
+      </List>
+    );
+  };
+
+  public renderContent(packageMeta): ReactElement<HTMLDivElement> {
+    const { versions = {}, time: timeMap = {}, [DIST_TAGS]: distTags = {} } = packageMeta;
+
+    return (
+      <>
+        {distTags && (
+          <>
+            <Heading variant="subheading">{'Current Tags'}</Heading>
+            {this.renderPackageList(distTags, false, timeMap)}
+          </>
+        )}
+        {versions && (
+          <>
+            <Heading variant="subheading">{'Version History'}</Heading>
+            {this.renderPackageList(versions, true, timeMap)}
+          </>
+        )}
+      </>
+    );
+  }
+}
+
+export default Versions;

src/components/Versions/__snapshots__/Versions.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Versions /> component should render the component in default state 1`] = `""`;

src/components/Versions/index.ts

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

src/components/Versions/styles.ts

@@ -0,0 +1,24 @@
+import styled from 'react-emotion';
+import Typography from '@material-ui/core/Typography';
+import { default as MuiListItemText } from '@material-ui/core/ListItemText';
+
+export const Heading = styled(Typography)`
+  && {
+    font-weight: 700;
+  }
+`;
+
+export const Spacer = styled('div')`
+  flex: 1 1 auto;
+  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+  white-space: nowrap;
+  height: 0.5em;
+`;
+
+export const ListItemText = styled(MuiListItemText)`
+  && {
+    flex: none;
+    color: black;
+    opacity: 0.6;
+  }
+`;