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

@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+
+import { Props, State } from './types';
+import { CommandContainer } from './styles';
+import CopyToClipBoard from '../CopyToClipBoard';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+
+import { getCLISetRegistry, getCLIChangePassword, getCLISetConfigRegistry } from '../../utils/cli-utils';
+import { NODE_MANAGER } from '../../utils/constants';
+
+/* eslint react/prop-types:0 */
+function TabContainer({ children }) {
+  return (
+    <CommandContainer>
+      <Typography component="div" style={{ padding: 0, minHeight: 170 }}>
+        {children}
+      </Typography>
+    </CommandContainer>
+  );
+}
+
+class RegistryInfoContent extends Component<Props, State> {
+  state = {
+    tabPosition: 0,
+  };
+
+  render() {
+    return <div>{this.renderTabs()}</div>;
+  }
+
+  renderTabs() {
+    const { scope, registryUrl } = this.props;
+    const { tabPosition } = this.state;
+
+    return (
+      <React.Fragment>
+        <Tabs indicatorColor="primary" onChange={this.handleChange} textColor="primary" value={tabPosition} variant="fullWidth">
+          <Tab label={NODE_MANAGER.npm} />
+          <Tab label={NODE_MANAGER.pnpm} />
+          <Tab label={NODE_MANAGER.yarn} />
+        </Tabs>
+        {tabPosition === 0 && <TabContainer>{this.renderNpmTab(scope, registryUrl)}</TabContainer>}
+        {tabPosition === 1 && <TabContainer>{this.renderPNpmTab(scope, registryUrl)}</TabContainer>}
+        {tabPosition === 2 && <TabContainer>{this.renderYarnTab(scope, registryUrl)}</TabContainer>}
+      </React.Fragment>
+    );
+  }
+
+  renderNpmTab(scope: string, registryUrl: string) {
+    return (
+      <React.Fragment>
+        <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.npm} set`, scope, registryUrl)} />
+        <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.npm} adduser`, registryUrl)} />
+        <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.npm, registryUrl)} />
+      </React.Fragment>
+    );
+  }
+
+  renderPNpmTab(scope: string, registryUrl: string) {
+    return (
+      <React.Fragment>
+        <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.pnpm} set`, scope, registryUrl)} />
+        <CopyToClipBoard text={getCLISetRegistry(`${NODE_MANAGER.pnpm} adduser`, registryUrl)} />
+        <CopyToClipBoard text={getCLIChangePassword(NODE_MANAGER.pnpm, registryUrl)} />
+      </React.Fragment>
+    );
+  }
+
+  renderYarnTab(scope: string, registryUrl: string) {
+    return (
+      <React.Fragment>
+        <CopyToClipBoard text={getCLISetConfigRegistry(`${NODE_MANAGER.yarn} config set`, scope, registryUrl)} />
+      </React.Fragment>
+    );
+  }
+
+  handleChange = (event: any, tabPosition: number) => {
+    event.preventDefault();
+    this.setState({ tabPosition });
+  };
+}
+
+export default RegistryInfoContent;

src/components/RegistryInfoContent/index.ts

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

src/components/RegistryInfoContent/styles.ts

@@ -0,0 +1,7 @@
+import styled from 'react-emotion';
+
+export const CommandContainer = styled('div')`
+  && {
+    padding-top: 20px;
+  }
+`;

src/components/RegistryInfoContent/types.ts

@@ -0,0 +1,8 @@
+export interface Props {
+  scope: string;
+  registryUrl: string;
+}
+
+export interface State {
+  tabPosition: number;
+}