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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CopyToClipBoard from './CopyToClipBoard';
+import { CopyIcon } from './styles';
+
+describe('<CopyToClipBoard /> component', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallow(<CopyToClipBoard text={'copy text'} />);
+  });
+
+  test('render the component', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('should call the DOM APIs for copy to clipboard utility', () => {
+    const event = {
+      preventDefault: jest.fn(),
+    };
+
+    // @ts-ignore: Property 'getSelection' does not exist on type 'Global'.
+    global.getSelection = jest.fn(() => ({
+      removeAllRanges: () => {},
+      addRange: () => {},
+    }));
+
+    // @ts-ignore: Property 'document/getSelection' does not exist on type 'Global'.
+    const { document, getSelection } = global;
+
+    wrapper.find(CopyIcon).simulate('click', event);
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(document.createRange).toHaveBeenCalled();
+    expect(getSelection).toHaveBeenCalled();
+    expect(document.execCommand).toHaveBeenCalledWith('copy');
+  });
+});

src/components/CopyToClipBoard/CopyToClipBoard.tsx

@@ -0,0 +1,40 @@
+import Tooltip from '@material-ui/core/Tooltip';
+import FileCopy from '@material-ui/icons/FileCopy';
+import React from 'react';
+
+import { copyToClipBoardUtility } from '../../utils/cli-utils';
+import { TEXT } from '../../utils/constants';
+
+import { ClipBoardCopy, ClipBoardCopyText, CopyIcon } from './styles';
+
+interface Props {
+  text: string;
+  children?: React.ReactNode;
+}
+
+const renderText: React.FC<any> = (text: string, children: React.ReactNode): React.ReactElement<HTMLElement> => {
+  if (children) {
+    return <ClipBoardCopyText>{children}</ClipBoardCopyText>;
+  }
+
+  return <ClipBoardCopyText>{text}</ClipBoardCopyText>;
+};
+
+const renderToolTipFileCopy = (text: string): React.ReactElement<HTMLElement> => (
+  <Tooltip disableFocusListener={true} title={TEXT.CLIPBOARD_COPY}>
+    <CopyIcon onClick={copyToClipBoardUtility(text)}>
+      <FileCopy />
+    </CopyIcon>
+  </Tooltip>
+);
+
+const CopyToClipBoard: React.FC<Props> = ({ text, children }) => {
+  return (
+    <ClipBoardCopy>
+      {renderText(text, children)}
+      {renderToolTipFileCopy(text)}
+    </ClipBoardCopy>
+  );
+};
+
+export default CopyToClipBoard;

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CopyToClipBoard /> component render the component 1`] = `"<div class=\\"css-1mta3t8 eb8w2fo0\\"><span class=\\"css-1m8aenu eb8w2fo1\\">copy text</span><button class=\\"MuiButtonBase-root-15 MuiIconButton-root-9 css-56v3u0 eb8w2fo2\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Copy to Clipboard\\"><span class=\\"MuiIconButton-label-14\\"><svg class=\\"MuiSvgIcon-root-18\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z\\"></path></svg></span></button></div>"`;

src/components/CopyToClipBoard/index.ts

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

src/components/CopyToClipBoard/styles.ts

@@ -0,0 +1,26 @@
+import IconButton from '@material-ui/core/IconButton';
+import styled from 'react-emotion';
+
+export const ClipBoardCopy = styled('div')`
+  && {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+`;
+
+export const ClipBoardCopyText = styled('span')`
+  && {
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    height: 21px;
+  }
+`;
+
+export const CopyIcon = styled(IconButton)`
+  && {
+    margin: 0 0 0 10px;
+  }
+`;