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/utils/styles/colors.ts

@@ -0,0 +1,38 @@
+// Verdaccio
+// -------------------------
+
+// Main colors
+// -------------------------
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  grey: '#808080',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+
+  // Main colors
+  // -------------------------
+
+  // @ts-ignore
+  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
+  secondary: '#20232a',
+};
+
+export default colors;

src/utils/styles/global.ts

@@ -0,0 +1,23 @@
+import { injectGlobal } from 'emotion';
+import { fontSize, fontWeight } from './sizes';
+
+export default injectGlobal`
+    html,
+    body {
+        height: 100%;
+    }
+
+    body {
+        font-size: ${fontSize.base};
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    strong {
+        font-weight: ${fontWeight.semiBold};
+    }
+`;

src/utils/styles/media.ts

@@ -0,0 +1,22 @@
+import { css } from 'emotion';
+
+export const breakpoints = {
+  small: 576,
+  medium: 768,
+  large: 1024,
+  xlarge: 1275,
+};
+
+const mq = Object.keys(breakpoints).reduce((accumulator, label) => {
+  const prefix = typeof breakpoints[label] === 'string' ? '' : 'min-width:';
+  const suffix = typeof breakpoints[label] === 'string' ? '' : 'px';
+  accumulator[label] = cls =>
+    css`
+      @media (${prefix + breakpoints[label] + suffix}) {
+        ${cls};
+      }
+    `;
+  return accumulator;
+}, {});
+
+export default mq;

src/utils/styles/mixings.ts

@@ -0,0 +1,40 @@
+/**
+ * CSS to represent truncated text with an ellipsis.
+ */
+export function ellipsis(width: string | number) {
+  return {
+    display: 'inline-block',
+    maxWidth: width,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    wordWrap: 'normal',
+  };
+}
+
+/**
+ * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
+ */
+interface SpacingShortHand<type> {
+  top?: type;
+  right?: type;
+  bottom?: type;
+  left?: type;
+}
+
+const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
+
+export function spacing(property: 'padding' | 'margin', ...values: SpacingShortHand<number | string>[]) {
+  const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
+  const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
+  let styles = {};
+  for (let i = 0; i < valuesWithDefaults.length; i += 1) {
+    if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
+      styles = {
+        ...styles,
+        [`${property}${positionMap[i]}`]: valuesWithDefaults[i],
+      };
+    }
+  }
+  return styles;
+}

src/utils/styles/sizes.ts

@@ -0,0 +1,22 @@
+export const fontSize = {
+  xxl: '26px',
+  xl: '24px',
+  lg: '21px',
+  md: '18px',
+  base: '16px',
+  sm: '14px',
+};
+
+export const lineHeight = {
+  xl: '30px',
+  sm: '18px',
+  xs: '2',
+  xxs: '1.5',
+};
+
+export const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};

src/utils/styles/spacings.ts

@@ -0,0 +1,6 @@
+// Spacings
+// -------------------------
+
+export const spacings = {
+  lg: '30px',
+};