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

@@ -0,0 +1,55 @@
+import ListItem from '@material-ui/core/ListItem';
+import Typography from '@material-ui/core/Typography';
+import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
+
+import PackageImg from './img/package.svg';
+import { Card, EmptyPackage, Heading, Inner, List, Wrapper } from './styles';
+
+export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
+
+export type NotFoundProps = RouteComponentProps & { width: any; history: any };
+
+const NotFound: React.FC<NotFoundProps> = ({ history, width }) => {
+  const handleGoTo = (to: string) => () => {
+    history.push(to);
+  };
+
+  const handleGoBack = () => () => {
+    history.goBack();
+  };
+
+  const renderList = () => (
+    <List>
+      <ListItem button={true} divider={true} onClick={handleGoTo('/')}>
+        {'Home'}
+      </ListItem>
+      <ListItem button={true} divider={true} onClick={handleGoBack()}>
+        {'Back'}
+      </ListItem>
+    </List>
+  );
+
+  const renderSubTitle = () => (
+    <Typography variant="subtitle1">
+      <div>{"The page you're looking for doesn't exist."}</div>
+      <div>{'Perhaps these links will help find what you are looking for:'}</div>
+    </Typography>
+  );
+
+  return (
+    <Wrapper>
+      <Inner>
+        <EmptyPackage alt="404 - Page not found" src={PackageImg} />
+        <Heading className="not-found-text" variant={isWidthUp('sm', width) ? 'h2' : 'h4'}>
+          {NOT_FOUND_TEXT}
+        </Heading>
+        {renderSubTitle()}
+        <Card>{renderList()}</Card>
+      </Inner>
+    </Wrapper>
+  );
+};
+
+export default withRouter(withWidth()(NotFound));

src/components/NotFound/Notfound.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { shallow } from 'enzyme';
+import NotFound from './NotFound';
+
+console.error = jest.fn();
+
+describe('<NotFound /> component', () => {
+  test('should load the component in default state', () => {
+    const routerWrapper = shallow(
+      <Router>
+        <NotFound />
+      </Router>
+    );
+    expect(routerWrapper.find(NotFound)).toMatchSnapshot();
+  });
+});

src/components/NotFound/__snapshots__/Notfound.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<NotFound /> component should load the component in default state 1`] = `<withRouter(WithTheme(WithWidth(NotFound))) />`;

src/components/NotFound/img/package.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 495.2 495.2"><path fill="#d38c0d" d="M325.6 224.4L495.2 126 325.6 28.4l-168.8 99.2z"/><g fill="#efbb67"><path d="M170.4 224.4l168-97.6-168-98.4L0 126.8z"/><path d="M416 368.4l-168 98.4-168-98.4v-196L248 74l168 98.4z"/></g><path fill="#d38c0d" d="M248 74l168 98.4v196l-168 98.4"/><path fill="#efbb67" d="M326.4 314.8L495.2 218l-169.6-98.4L156 218z"/><path fill="#d38c0d" d="M170.4 316.4l168.8-99.2-168.8-97.6L0 218z"/><path fill="#704a0e" d="M248.8 270.8L416 172.4 248.8 74 78.4 172.4z"/><path fill="#513307" d="M248.8 270.8L416 172.4 248.8 74"/><path fill="#2d1c05" d="M248.8 270.8l36-21.6-36-20.8-36 20.8z"/><g fill="#0dd396"><path d="M368 379.6l40-23.2v-12.8l-40 23.2zM368 356.4l40-23.2v-12.8l-40 23.2zM368 333.2l40-23.2v-13.6l-40 24z"/></g></svg>

src/components/NotFound/index.ts

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

src/components/NotFound/styles.ts

@@ -0,0 +1,41 @@
+import { default as MuiCard } from '@material-ui/core/Card';
+import { default as MuiList } from '@material-ui/core/List';
+import Typography from '@material-ui/core/Typography';
+import styled from 'react-emotion';
+
+export const Wrapper = styled('div')`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  padding: 16px;
+`;
+
+export const Inner = styled('div')`
+  max-width: 650px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const EmptyPackage = styled('img')`
+  width: 150px;
+  margin: 0 auto;
+`;
+
+export const Heading = styled(Typography)`
+  && {
+    color: #4b5e40;
+  }
+`;
+
+export const List = styled(MuiList)`
+  && {
+    padding: 0;
+    color: #4b5e40;
+  }
+`;
+
+export const Card = styled(MuiCard)`
+  margin-top: 24px;
+`;