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

@@ -0,0 +1,140 @@
+import React, { KeyboardEvent } from 'react';
+import Autosuggest from 'react-autosuggest';
+import match from 'autosuggest-highlight/match';
+import parse from 'autosuggest-highlight/parse';
+import MenuItem from '@material-ui/core/MenuItem';
+
+import { fontWeight } from '../../utils/styles/sizes';
+import { Wrapper, InputField, SuggestionContainer } from './styles';
+
+export interface Props {
+  suggestions: any[];
+  suggestionsLoading?: boolean;
+  suggestionsLoaded?: boolean;
+  suggestionsError?: boolean;
+  apiLoading?: boolean;
+  color?: string;
+  value?: string;
+  placeholder?: string;
+  startAdornment?: any;
+  disableUnderline?: boolean;
+  onChange?: (event: KeyboardEvent<HTMLInputElement>, { newValue, method }: { newValue: string; method: string }) => void;
+  onSuggestionsFetch?: ({ value: string }) => Promise<void>;
+  onCleanSuggestions?: () => void;
+  onClick?: (event: KeyboardEvent<HTMLInputElement>, { suggestionValue, method }: { suggestionValue: any[]; method: string }) => void;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: (event: KeyboardEvent<HTMLInputElement>) => void;
+}
+
+const renderInputComponent = inputProps => {
+  const { ref, startAdornment, disableUnderline, onKeyDown, ...others } = inputProps;
+  return (
+    <InputField
+      InputProps={{
+        inputRef: node => {
+          ref(node);
+        },
+        startAdornment,
+        disableUnderline,
+        onKeyDown,
+      }}
+      fullWidth={true}
+      {...others}
+    />
+  );
+};
+
+const getSuggestionValue = (suggestion): string => suggestion.name;
+
+const renderSuggestion = (suggestion, { query, isHighlighted }) => {
+  const matches = match(suggestion.name, query);
+  const parts = parse(suggestion.name, matches);
+  return (
+    <MenuItem component="div" selected={isHighlighted}>
+      <div>
+        {parts.map((part, index) => {
+          return part.highlight ? (
+            <a href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.semiBold }}>
+              {part.text}
+            </a>
+          ) : (
+            <a href={suggestion.link} key={String(index)} style={{ fontWeight: fontWeight.light }}>
+              {part.text}
+            </a>
+          );
+        })}
+      </div>
+    </MenuItem>
+  );
+};
+
+const renderMessage = message => {
+  return (
+    <MenuItem component="div" selected={false}>
+      <div>{message}</div>
+    </MenuItem>
+  );
+};
+
+const SUGGESTIONS_RESPONSE = {
+  LOADING: 'Loading...',
+  FAILURE: 'Something went wrong.',
+  NO_RESULT: 'No results found.',
+};
+
+const AutoComplete = ({
+  suggestions,
+  startAdornment,
+  onChange,
+  onSuggestionsFetch,
+  onCleanSuggestions,
+  value = '',
+  placeholder = '',
+  disableUnderline = false,
+  color,
+  onClick,
+  onKeyDown,
+  onBlur,
+  suggestionsLoading = false,
+  suggestionsLoaded = false,
+  suggestionsError = false,
+}: Props) => {
+  const autosuggestProps = {
+    renderInputComponent,
+    suggestions,
+    getSuggestionValue,
+    renderSuggestion,
+    onSuggestionsFetchRequested: onSuggestionsFetch,
+    onSuggestionsClearRequested: onCleanSuggestions,
+  };
+  const inputProps = {
+    value,
+    onChange,
+    placeholder,
+    startAdornment,
+    disableUnderline,
+    color,
+    onKeyDown,
+    onBlur,
+  };
+
+  // this format avoid arrow function eslint rule
+  function renderSuggestionsContainer({ containerProps, children, query }) {
+    return (
+      <SuggestionContainer {...containerProps} square={true}>
+        {suggestionsLoaded && children === null && query && renderMessage(SUGGESTIONS_RESPONSE.NO_RESULT)}
+        {suggestionsLoading && query && renderMessage(SUGGESTIONS_RESPONSE.LOADING)}
+        {suggestionsError && renderMessage(SUGGESTIONS_RESPONSE.FAILURE)}
+        {children}
+      </SuggestionContainer>
+    );
+  }
+
+  return (
+    <Wrapper>
+      <Autosuggest {...autosuggestProps} inputProps={inputProps} onSuggestionSelected={onClick} renderSuggestionsContainer={renderSuggestionsContainer} />
+    </Wrapper>
+  );
+};
+
+export default AutoComplete;

src/components/AutoComplete/index.ts

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

src/components/AutoComplete/styles.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled, { css } from 'react-emotion';
+import Paper from '@material-ui/core/Paper';
+
+import TextField from '../TextField';
+
+export interface InputFieldProps {
+  color: string;
+}
+
+export const Wrapper = styled('div')`
+  && {
+    width: 100%;
+    height: 32px;
+    position: relative;
+    z-index: 1;
+  }
+`;
+
+export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
+  <TextField
+    {...others}
+    classes={{
+      // @ts-ignore
+      input: css`
+        && {
+          ${color &&
+            css`
+              color: ${color};
+            `};
+        }
+      `,
+      root: css`
+        && {
+          &:before {
+            content: '';
+            border: none;
+          }
+          &:after {
+            ${color &&
+              css`
+                border-color: ${color};
+              `};
+          }
+          &:hover:before {
+            content: none;
+          }
+        }
+      `,
+    }}
+  />
+);
+
+export const SuggestionContainer = styled(Paper)`
+  && {
+    max-height: 500px;
+    overflow-y: auto;
+  }
+`;