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

@@ -0,0 +1,54 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import Divider from '@material-ui/core/Divider';
+
+import Package from '../Package';
+import Help from '../Help';
+import { formatLicense } from '../../utils/package';
+
+// @ts-ignore
+import classes from './packageList.scss';
+
+interface Props {
+  packages: any;
+}
+
+export default class PackageList extends React.Component<Props, {}> {
+  static propTypes = {
+    packages: PropTypes.array,
+  };
+
+  render() {
+    return (
+      <div className={'package-list-items'}>
+        <div className={classes.pkgContainer}>{this.hasPackages() ? this.renderPackages() : <Help />}</div>
+      </div>
+    );
+  }
+
+  hasPackages() {
+    const { packages } = this.props;
+    return packages.length > 0;
+  }
+
+  renderPackages = () => {
+    return <>{this.renderList()}</>;
+  };
+
+  renderList = () => {
+    const { packages } = this.props;
+    return packages.map((pkg, i) => {
+      const { name, version, description, time, keywords, dist, homepage, bugs } = pkg;
+      const author = pkg.author;
+      // TODO: move format license to API side.
+      const license = formatLicense(pkg.license);
+      return (
+        <Fragment key={i}>
+          {i !== 0 && <Divider />}
+          <Package {...{ name, dist, version, author, description, license, time, keywords, homepage, bugs }} />
+        </Fragment>
+      );
+    });
+  };
+}

src/components/PackageList/Packagelist.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import PackageList from './PackageList';
+import Help from '../Help';
+import { BrowserRouter } from 'react-router-dom';
+
+describe('<PackageList /> component', () => {
+  test('should load the component with no packages', () => {
+    const props = {
+      packages: [],
+    };
+    const wrapper = mount(<PackageList packages={props.packages} />);
+    expect(wrapper.find(Help).exists()).toBeTruthy();
+  });
+
+  test('should load the component with packages', () => {
+    const props = {
+      packages: [
+        {
+          name: 'verdaccio',
+          version: '1.0.0',
+          time: new Date(1532211072138).getTime(),
+          description: 'Private NPM repository',
+          author: { name: 'Sam', avatar: 'test avatar' },
+        },
+        {
+          name: 'abc',
+          version: '1.0.1',
+          time: new Date(1532211072138).getTime(),
+          description: 'abc description',
+          author: { name: 'Rose', avatar: 'test avatar' },
+        },
+        {
+          name: 'xyz',
+          version: '1.1.0',
+          description: 'xyz description',
+          author: { name: 'Martin', avatar: 'test avatar' },
+        },
+      ],
+      help: false,
+    };
+
+    const wrapper = mount(
+      <BrowserRouter>
+        <PackageList packages={props.packages} />
+      </BrowserRouter>
+    );
+
+    // package count
+    expect(wrapper.find('Package')).toHaveLength(3);
+  });
+});

src/components/PackageList/index.ts

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

src/components/PackageList/packageList.scss

@@ -0,0 +1,12 @@
+@import '../../styles/mixins';
+
+.pkgContainer {
+  margin: 0;
+  padding: 0;
+
+  .listTitle {
+    font-weight: $font-weight-regular;
+    font-size: $font-size-xl;
+    margin: 0 0 10px 0;
+  }
+}