chore(release): 0.2.2

Merge pull request #110 from verdaccio/issue-token
fix: download protected tarballs
2019-07-29 16:33:18 +02:00 · 2019-07-29 16:32:27 +02:00 · 2019-07-29 08:42:37 +02:00 · 2019-07-29 00:12:14 +02:00 · 2019-07-28 17:51:46 +02:00 · 2019-07-28 16:44:31 +02:00
47 changed files with 1725 additions and 1228 deletions
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -26,6 +26,7 @@
      "no-descending-specificity": [true, { "severity": "warning" }],
      "no-duplicate-at-import-rules": true,
      "no-duplicate-selectors": true,
+      "no-empty-source": null,
      "no-extra-semicolons": true,
      "no-invalid-double-slash-comments": true,
      "property-no-unknown": true,
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,19 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

+<a name="0.2.2"></a>
+## [0.2.2](https://github.com/verdaccio/ui/compare/v0.2.1...v0.2.2) (2019-07-29)
+
+
+### Bug Fixes
+
+* css repetition is not closed in Logo component ([ec243b1](https://github.com/verdaccio/ui/commit/ec243b1))
+* localhost domain download tarball button ([cca2c3c](https://github.com/verdaccio/ui/commit/cca2c3c))
+* proxy webpack setting ([5c484bb](https://github.com/verdaccio/ui/commit/5c484bb))
+* token were not being send it ([fd74c52](https://github.com/verdaccio/ui/commit/fd74c52))
+
+
+
 <a name="0.2.1"></a>
 ## [0.2.1](https://github.com/verdaccio/ui/compare/v0.2.0...v0.2.1) (2019-07-10)

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@verdaccio/ui-theme",
-  "version": "0.2.1",
+  "version": "0.2.2",
  "description": "Verdaccio User Interface",
  "author": {
    "name": "Verdaccio Core Team"
@@ -15,20 +15,21 @@
    "@commitlint/config-conventional": "8.0.0",
    "@material-ui/core": "3.9.3",
    "@material-ui/icons": "3.0.2",
-    "@octokit/rest": "16.23.2",
-    "@types/enzyme": "3.9.3",
+    "@octokit/rest": "16.28.7",
+    "@types/enzyme": "3.10.3",
    "@types/lodash": "4.14.134",
    "@types/material-ui": "0.21.6",
-    "@types/node": "12.0.8",
+    "@types/node": "12.6.8",
    "@types/react": "16.8.16",
    "@types/react-dom": "16.8.4",
    "@types/react-router-dom": "4.3.2",
-    "@verdaccio/babel-preset": "0.2.1",
-    "@verdaccio/eslint-config": "0.0.1",
-    "@verdaccio/types": "6.1.0",
+    "@types/validator": "10.11.1",
+    "@verdaccio/babel-preset": "2.0.0",
+    "@verdaccio/eslint-config": "2.0.0",
+    "@verdaccio/types": "7.0.0",
    "autosuggest-highlight": "3.1.1",
    "babel-loader": "8.0.6",
-    "bundlesize": "0.17.2",
+    "bundlesize": "0.18.0",
    "codecov": "3.5.0",
    "concurrently": "4.1.0",
    "cross-env": "5.2.0",
@@ -42,7 +43,7 @@
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-prettier": "3.1.0",
    "eslint-plugin-react": "7.13.0",
-    "eslint-plugin-verdaccio": "0.0.5",
+    "eslint-plugin-verdaccio": "2.0.0",
    "file-loader": "2.0.0",
    "friendly-errors-webpack-plugin": "1.7.0",
    "get-stdin": "6.0.0",
@@ -85,17 +86,17 @@
    "stylelint-webpack-plugin": "0.10.5",
    "supertest": "4.0.2",
    "typeface-roboto": "0.0.54",
-    "typescript": "3.5.2",
+    "typescript": "3.5.3",
    "url-loader": "1.1.2",
    "validator": "10.11.0",
-    "verdaccio": "4.0.3",
-    "verdaccio-auth-memory": "0.0.4",
+    "verdaccio": "4.1.0",
+    "verdaccio-auth-memory": "1.1.5",
    "verdaccio-memory": "2.0.0",
    "webpack": "4.20.2",
    "webpack-bundle-analyzer": "3.3.2",
    "webpack-bundle-size-analyzer": "3.0.0",
-    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "3.2.1",
+    "webpack-cli": "3.3.6",
+    "webpack-dev-server": "3.7.2",
    "webpack-merge": "4.2.1",
    "whatwg-fetch": "3.0.0",
    "xss": "1.0.6"
@@ -156,7 +157,7 @@
  },
  "husky": {
    "hooks": {
-      "pre-commit": "commitlint -e $GIT_PARAMS"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "license": "MIT",
--- a/src/App/styles.ts
+++ b/src/App/styles.ts
@@ -1,15 +1,15 @@
 import { css } from 'emotion';
 import colors from '../utils/styles/colors';

-export const alertError = css`
-  background-color: ${colors.red} !important;
-  min-width: inherit !important;
-`;
+export const alertError = css({
+  backgroundColor: `${colors.red} !important`,
+  minWidth: 'inherit !important',
+});

-export const alertErrorMsg = css`
-  display: flex;
-  align-items: center;
-`;
+export const alertErrorMsg = css({
+  display: 'flex',
+  alignItems: 'center',
+});

 export const alertIcon = css({
  opacity: 0.9,
--- a/src/components/ActionBar/ActionBar.test.tsx
+++ b/src/components/ActionBar/ActionBar.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';

 describe('<ActionBar /> component', () => {
  beforeEach(() => {
@@ -43,6 +43,31 @@ describe('<ActionBar /> component', () => {

    const ActionBar = require('./ActionBar').default;
    const wrapper = shallow(<ActionBar />);
+    // FIXME: this only renders the DetailContextConsumer, thus
+    // the wrapper will be always empty
    expect(wrapper.html()).toEqual('');
  });
+
+  test('when there is a button to download a tarball', () => {
+    const packageMeta = {
+      latest: {
+        dist: {
+          tarball: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+        },
+      },
+    };
+
+    jest.doMock('../../pages/version/Version', () => ({
+      DetailContextConsumer: component => {
+        return component.children({ packageMeta });
+      },
+    }));
+
+    const ActionBar = require('./ActionBar').default;
+    const wrapper = mount(<ActionBar />);
+    expect(wrapper.html()).toMatchSnapshot();
+
+    const button = wrapper.find('button');
+    expect(button).toHaveLength(1);
+  });
 });
--- a/src/components/ActionBar/ActionBar.tsx
+++ b/src/components/ActionBar/ActionBar.tsx
@@ -8,7 +8,25 @@ import Tooltip from '@material-ui/core/Tooltip';

 import { DetailContextConsumer, VersionPageConsumerProps } from '../../pages/version/Version';
 import { Fab, ActionListItem } from './styles';
-import { isURL } from '../../utils/url';
+import { isURL, extractFileName, downloadFile } from '../../utils/url';
+import api from '../../utils/api';
+
+export interface Action {
+  icon: string;
+  title: string;
+  handler?: Function;
+}
+
+export async function downloadHandler(link: string): Promise<void> {
+  const fileStream: Blob = await api.request(link, 'GET', {
+    headers: {
+      ['accept']: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3',
+    },
+    credentials: 'include',
+  });
+  const fileName = extractFileName(link);
+  downloadFile(fileStream, fileName);
+}

 const ACTIONS = {
  homepage: {
@@ -22,6 +40,7 @@ const ACTIONS = {
  tarball: {
    icon: <DownloadIcon />,
    title: 'Download tarball',
+    handler: downloadHandler,
  },
 };

@@ -54,16 +73,34 @@ class ActionBar extends Component {
      tarball,
    };

-    const renderList = Object.keys(actionsMap).reduce((component, value, key) => {
+    const renderList = Object.keys(actionsMap).reduce((component: React.ReactElement[], value, key) => {
      const link = actionsMap[value];
      if (link && isURL(link)) {
-        const fab = <Fab size={'small'}>{ACTIONS[value]['icon']}</Fab>;
-        component.push(
-          // @ts-ignore
-          <Tooltip key={key} title={ACTIONS[value]['title']}>
-            <>{this.renderIconsWithLink(link, fab)}</>
-          </Tooltip>
-        );
+        const actionItem: Action = ACTIONS[value];
+        if (actionItem.handler) {
+          const fab = (
+            <Tooltip key={key} title={actionItem['title']}>
+              <Fab
+                /* eslint-disable react/jsx-no-bind */
+                onClick={() => {
+                  /* eslint-disable @typescript-eslint/no-non-null-assertion */
+                  actionItem.handler!(link);
+                }}
+                size={'small'}>
+                {actionItem['icon']}
+              </Fab>
+            </Tooltip>
+          );
+          component.push(fab);
+        } else {
+          const fab = <Fab size={'small'}>{actionItem['icon']}</Fab>;
+          component.push(
+            // @ts-ignore
+            <Tooltip key={key} title={actionItem['title']}>
+              <>{this.renderIconsWithLink(link, fab)}</>
+            </Tooltip>
+          );
+        }
      }
      return component;
    }, []);
--- a/src/components/ActionBar/snapshots/ActionBar.test.tsx.snap
+++ b/src/components/ActionBar/snapshots/ActionBar.test.tsx.snap
@@ -1,3 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<ActionBar /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2\\"><li class=\\"MuiListItem-root-5 MuiListItem-default-8 MuiListItem-gutters-13 MuiListItem-alignItemsFlexStart-10 css-9q3x3c eux6shq0\\"><a href=\\"https://verdaccio.tld\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></span></button></a><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span></button></a><a href=\\"https://verdaccio.tld/download\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span></button></a></li></ul>"`;
+exports[`<ActionBar /> component should render the component in default state 1`] = `"<ul class=\\"MuiList-root-1 MuiList-padding-2\\"><li class=\\"MuiListItem-root-5 MuiListItem-default-8 MuiListItem-gutters-13 MuiListItem-alignItemsFlexStart-10 css-9q3x3c eux6shq0\\"><a href=\\"https://verdaccio.tld\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></span></button></a><a href=\\"https://verdaccio.tld/bugs\\" target=\\"_blank\\"><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M20 8h-2.81c-.45-.78-1.07-1.45-1.82-1.96L17 4.41 15.59 3l-2.17 2.17C12.96 5.06 12.49 5 12 5c-.49 0-.96.06-1.41.17L8.41 3 7 4.41l1.62 1.63C7.88 6.55 7.26 7.22 6.81 8H4v2h2.09c-.05.33-.09.66-.09 1v1H4v2h2v1c0 .34.04.67.09 1H4v2h2.81c1.04 1.79 2.97 3 5.19 3s4.15-1.21 5.19-3H20v-2h-2.09c.05-.33.09-.66.09-1v-1h2v-2h-2v-1c0-.34-.04-.67-.09-1H20V8zm-6 8h-4v-2h4v2zm0-4h-4v-2h4v2z\\"></path></svg></span></button></a><button class=\\"MuiButtonBase-root-35 MuiFab-root-25 MuiFab-sizeSmall-33 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label-26\\"><svg class=\\"MuiSvgIcon-root-38\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span></button></li></ul>"`;
+
+exports[`<ActionBar /> component when there is a button to download a tarball 1`] = `"<ul class=\\"MuiList-root-47 MuiList-padding-48\\"><li class=\\"MuiListItem-root-51 MuiListItem-default-54 MuiListItem-gutters-59 MuiListItem-alignItemsFlexStart-56 css-9q3x3c eux6shq0\\"><button class=\\"MuiButtonBase-root-81 MuiFab-root-71 MuiFab-sizeSmall-79 css-96oxa0 eux6shq1\\" tabindex=\\"0\\" type=\\"button\\" title=\\"Download tarball\\"><span class=\\"MuiFab-label-72\\"><svg class=\\"MuiSvgIcon-root-84\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM17 13l-5 5-5-5h3V9h4v4h3z\\"></path></svg></span><span class=\\"MuiTouchRipple-root-93\\"></span></button></li></ul>"`;
--- a/src/components/ActionBar/styles.ts
+++ b/src/components/ActionBar/styles.ts
@@ -4,18 +4,18 @@ import ListItem from '@material-ui/core/ListItem';

 import colors from '../../utils/styles/colors';

-export const ActionListItem = styled(ListItem)`
-  && {
-    padding-top: 0;
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;
+export const ActionListItem = styled(ListItem)({
+  '&&': {
+    paddingTop: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+});

-export const Fab = styled(MuiFab)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-    margin-right: 10px;
-  }
-`;
+export const Fab = styled(MuiFab)({
+  '&&': {
+    backgroundColor: colors.primary,
+    color: colors.white,
+    marginRight: '10px',
+  },
+});
--- a/src/components/Author/styles.ts
+++ b/src/components/Author/styles.ts
@@ -2,15 +2,15 @@ import styled from 'react-emotion';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-`;
-export const AuthorListItem = styled(ListItem)`
-  && {
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    textTransform: 'capitalize',
+  },
+});
+export const AuthorListItem = styled(ListItem)({
+  '&&': {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+});
--- a/src/components/AutoComplete/styles.tsx
+++ b/src/components/AutoComplete/styles.tsx
@@ -8,14 +8,14 @@ export interface InputFieldProps {
  color: string;
 }

-export const Wrapper = styled('div')`
-  && {
-    width: 100%;
-    height: 32px;
-    position: relative;
-    z-index: 1;
-  }
-`;
+export const Wrapper = styled('div')({
+  '&&': {
+    width: '100%',
+    height: '32px',
+    position: 'relative',
+    zIndex: 1,
+  },
+});

 export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
  <TextField
@@ -51,9 +51,9 @@ export const InputField: React.FC<InputFieldProps> = ({ color, ...others }) => (
  />
 );

-export const SuggestionContainer = styled(Paper)`
-  && {
-    max-height: 500px;
-    overflow-y: auto;
-  }
-`;
+export const SuggestionContainer = styled(Paper)({
+  '&&': {
+    maxHeight: '500px',
+    overflowY: 'auto',
+  },
+});
--- a/src/components/CopyToClipBoard/styles.ts
+++ b/src/components/CopyToClipBoard/styles.ts
@@ -1,26 +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 ClipBoardCopy = styled('div')({
+  '&&': {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});

-export const ClipBoardCopyText = styled('span')`
-  && {
-    display: inline-block;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    height: 21px;
-  }
-`;
+export const ClipBoardCopyText = styled('span')({
+  '&&': {
+    display: 'inline-block',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    height: '21px',
+  },
+});

-export const CopyIcon = styled(IconButton)`
-  && {
-    margin: 0 0 0 10px;
-  }
-`;
+export const CopyIcon = styled(IconButton)({
+  '&&': {
+    margin: '0 0 0 10px',
+  },
+});
--- a/src/components/Dependencies/styles.ts
+++ b/src/components/Dependencies/styles.ts
@@ -3,30 +3,30 @@ import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
 import Chip from '@material-ui/core/Chip';

-export const CardWrap = styled(Card)`
-  && {
-    margin: 0 0 16px;
-  }
-`;
+export const CardWrap = styled(Card)({
+  '&&': {
+    margin: '0 0 16px',
+  },
+});

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    textTransform: 'capitalize',
+  },
+});

-export const Tags = styled('div')`
-  && {
-    display: flex;
-    justify-content: start;
-    flex-wrap: wrap;
-    margin: 0 -5px;
-  }
-`;
+export const Tags = styled('div')({
+  '&&': {
+    display: 'flex',
+    justifyContent: 'start',
+    flexWrap: 'wrap',
+    margin: '0 -5px',
+  },
+});

-export const Tag = styled(Chip)`
-  && {
-    margin: 5px;
-  }
-`;
+export const Tag = styled(Chip)({
+  '&&': {
+    margin: '5px',
+  },
+});
--- a/src/components/DetailContainer/styles.ts
+++ b/src/components/DetailContainer/styles.ts
@@ -1,7 +1,7 @@
 import styled from 'react-emotion';

-export const Content = styled('div')`
-  && {
-    padding: 15px;
-  }
-`;
+export const Content = styled('div')({
+  '&&': {
+    padding: '15px',
+  },
+});
--- a/src/components/DetailSidebar/styles.ts
+++ b/src/components/DetailSidebar/styles.ts
@@ -5,26 +5,26 @@ import ListItemText from '@material-ui/core/ListItemText';

 import colors from '../../utils/styles/colors';

-export const TitleListItem = styled(ListItem)`
-  && {
-    padding-left: 0;
-    padding-right: 0;
-    padding-bottom: 0;
-  }
-`;
+export const TitleListItem = styled(ListItem)({
+  '&&': {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingBottom: 0,
+  },
+});

-export const TitleListItemText = styled(ListItemText)`
-  && {
-    padding-left: 0;
-    padding-right: 0;
-    padding-top: 8px;
-  }
-`;
+export const TitleListItemText = styled(ListItemText)({
+  '&&': {
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: '8px',
+  },
+});

-export const TitleAvatar = styled(Avatar)`
-  && {
-    color: ${colors.greySuperLight};
-    background-color: ${colors.primary};
-    text-transform: capitalize;
-  }
-`;
+export const TitleAvatar = styled(Avatar)({
+  '&&': {
+    color: colors.greySuperLight,
+    backgroundColor: colors.primary,
+    textTransform: 'capitalize',
+  },
+});
--- a/src/components/Developers/styles.ts
+++ b/src/components/Developers/styles.ts
@@ -3,32 +3,32 @@ import Typography from '@material-ui/core/Typography';
 import { default as MuiFab } from '@material-ui/core/Fab';
 import colors from '../../utils/styles/colors';

-export const Details = styled('span')`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;
+export const Details = styled('span')({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+});

-export const Content = styled('div')`
-  margin: 10px 0 10px 0;
-  display: flex;
-  flex-wrap: wrap;
-  > * {
-    margin: 5px;
-  }
-`;
+export const Content = styled('div')({
+  margin: '10px 0 10px 0',
+  display: 'flex',
+  flexWrap: 'wrap',
+  '> *': {
+    margin: '5px',
+  },
+});

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    margin-bottom: 10px;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    marginBottom: '10px',
+    textTransform: 'capitalize',
+  },
+});

-export const Fab = styled(MuiFab)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-  }
-`;
+export const Fab = styled(MuiFab)({
+  '&&': {
+    backgroundColor: colors.primary,
+    color: colors.white,
+  },
+});
--- a/src/components/Dist/styles.ts
+++ b/src/components/Dist/styles.ts
@@ -6,30 +6,30 @@ import Typography from '@material-ui/core/Typography';

 import colors from '../../utils/styles/colors';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    textTransform: 'capitalize',
+  },
+});

-export const DistListItem = styled(ListItem)`
-  && {
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;
+export const DistListItem = styled(ListItem)({
+  '&&': {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+});

-export const DistChips = styled(Chip)`
-  && {
-    margin-right: 5px;
-    text-transform: capitalize;
-  }
-`;
+export const DistChips = styled(Chip)({
+  '&&': {
+    marginRight: '5px',
+    textTransform: 'capitalize',
+  },
+});

-export const DownloadButton = styled(MuiFab)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-  }
-`;
+export const DownloadButton = styled(MuiFab)({
+  '&&': {
+    backgroundColor: colors.primary,
+    color: colors.white,
+  },
+});
--- a/src/components/Engines/styles.ts
+++ b/src/components/Engines/styles.ts
@@ -2,15 +2,15 @@ import styled from 'react-emotion';
 import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    textTransform: 'capitalize',
+  },
+});

-export const EngineListItem = styled(ListItem)`
-  && {
-    padding-left: 0;
-  }
-`;
+export const EngineListItem = styled(ListItem)({
+  '&&': {
+    paddingLeft: 0,
+  },
+});
--- a/src/components/Footer/styles.ts
+++ b/src/components/Footer/styles.ts
@@ -3,15 +3,15 @@ import mq from '../../utils/styles/media';
 import Icon from '../Icon/Icon';
 import colors from '../../utils/styles/colors';

-export const Wrapper = styled('div')`
-  && {
-    background: ${colors.snow};
-    border-top: 1px solid ${colors.greyGainsboro};
-    color: ${colors.nobel01};
-    font-size: 14px;
-    padding: 20px;
-  }
-`;
+export const Wrapper = styled('div')({
+  '&&': {
+    background: colors.snow,
+    borderTop: `1px solid ${colors.greyGainsboro}`,
+    color: colors.nobel01,
+    fontSize: '14px',
+    padding: '20px',
+  },
+});

 export const Inner = styled('div')`
  && {
@@ -50,24 +50,24 @@ export const Left = styled('div')`
  }
 `;

-export const Right = styled(Left)`
-  && {
-    display: flex;
-  }
-`;
+export const Right = styled(Left)({
+  '&&': {
+    display: 'flex',
+  },
+});

-export const ToolTip = styled('span')`
-  && {
-    position: relative;
-    height: 18px;
-  }
-`;
+export const ToolTip = styled('span')({
+  '&&': {
+    position: 'relative',
+    height: '18px',
+  },
+});

-export const Earth = styled(Icon)`
-  && {
-    padding: 0 10px;
-  }
-`;
+export const Earth = styled(Icon)({
+  '&&': {
+    padding: '0 10px',
+  },
+});

 export const Flags = styled('span')`
  && {
@@ -96,17 +96,17 @@ export const Flags = styled('span')`
  }
 `;

-export const Love = styled('span')`
-  && {
-    color: ${colors.love};
-    padding: 0 5px;
-  }
-`;
+export const Love = styled('span')({
+  '&&': {
+    color: colors.love,
+    padding: '0 5px',
+  },
+});

-export const Flag = styled(Icon)`
-  && {
-    padding: 0 5px;
-  }
-`;
+export const Flag = styled(Icon)({
+  '&&': {
+    padding: '0 5px',
+  },
+});

 export const Logo = Flag;
--- a/src/components/Header/snapshots/Header.test.tsx.snap
+++ b/src/components/Header/snapshots/Header.test.tsx.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `"<div><header class=\\"MuiPaper-root-10 MuiPaper-elevation4-16 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-8 css-rfunvc e1jf5lit8\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1pwdmmq e1jf5lit0\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1vacr9s e1jf5lit3\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1tnu3ib em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-m61s5i e1jf5lit2\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" role=\\"button\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-account\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></span></button></div></div></header></div>"`;
+exports[`<Header /> component with logged in state should load the component in logged in state 1`] = `"<div><header class=\\"MuiPaper-root-10 MuiPaper-elevation4-16 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-8 css-rfunvc e1jf5lit8\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1pwdmmq e1jf5lit0\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1vacr9s e1jf5lit3\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-m61s5i e1jf5lit2\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" role=\\"button\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-account\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></span></button></div></div></header></div>"`;

-exports[`<Header /> component with logged out state should load the component in logged out state 1`] = `"<div><header class=\\"MuiPaper-root-10 MuiPaper-elevation4-16 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-8 css-rfunvc e1jf5lit8\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1pwdmmq e1jf5lit0\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1vacr9s e1jf5lit3\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1tnu3ib em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-m61s5i e1jf5lit2\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" role=\\"button\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root-55 MuiButton-root-85 MuiButton-text-87 MuiButton-flat-90 MuiButton-colorInherit-106\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-login\\"><span class=\\"MuiButton-label-86\\">Login</span></button></div></div></header></div>"`;
+exports[`<Header /> component with logged out state should load the component in logged out state 1`] = `"<div><header class=\\"MuiPaper-root-10 MuiPaper-elevation4-16 MuiAppBar-root-1 MuiAppBar-positionStatic-5 MuiAppBar-colorPrimary-8 css-rfunvc e1jf5lit8\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1pwdmmq e1jf5lit0\\"><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-1vacr9s e1jf5lit3\\"><a class=\\"css-1dk30lc\\" href=\\"/\\"><div class=\\"css-1sifsqk em793ed0\\"></div></a></div><div class=\\"MuiToolbar-root-37 MuiToolbar-regular-39 MuiToolbar-gutters-38 css-m61s5i e1jf5lit2\\"><a href=\\"https://verdaccio.org/docs/en/installation\\" target=\\"_blank\\" class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" role=\\"button\\" title=\\"Documentation\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z\\"></path></svg></span></a><button class=\\"MuiButtonBase-root-55 MuiIconButton-root-49 MuiIconButton-colorInherit-50\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-registryInfo\\" title=\\"Registry Information\\"><span class=\\"MuiIconButton-label-54\\"><svg class=\\"MuiSvgIcon-root-58\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path><path d=\\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\\"></path></svg></span></button><button class=\\"MuiButtonBase-root-55 MuiButton-root-85 MuiButton-text-87 MuiButton-flat-90 MuiButton-colorInherit-106\\" tabindex=\\"0\\" type=\\"button\\" id=\\"header--button-login\\"><span class=\\"MuiButton-label-86\\">Login</span></button></div></div></header></div>"`;
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -6,67 +6,67 @@ import IconButton from '@material-ui/core/IconButton';
 import colors from '../../utils/styles/colors';
 import mq from '../../utils/styles/media';

-export const InnerNavBar = styled(Toolbar)`
-  && {
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 15px;
-  }
-`;
+export const InnerNavBar = styled(Toolbar)({
+  '&&': {
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '0 15px',
+  },
+});

-export const Greetings = styled('span')`
-  && {
-    margin: 0 5px 0 0;
-  }
-`;
+export const Greetings = styled('span')({
+  '&&': {
+    margin: '0 5px 0 0',
+  },
+});

-export const RightSide = styled(Toolbar)`
-  && {
-    display: flex;
-    padding: 0;
-  }
-`;
+export const RightSide = styled(Toolbar)({
+  '&&': {
+    display: 'flex',
+    padding: 0,
+  },
+});

-export const LeftSide = styled(RightSide)`
-  && {
-    flex: 1;
-  }
-`;
+export const LeftSide = styled(RightSide)({
+  '&&': {
+    flex: 1,
+  },
+});

-export const MobileNavBar = styled('div')`
-  && {
-    align-items: center;
-    display: flex;
-    border-bottom: 1px solid ${colors.greyLight};
-    padding: 8px;
-    position: relative;
-  }
-`;
+export const MobileNavBar = styled('div')({
+  '&&': {
+    alignItems: 'center',
+    display: 'flex',
+    borderBottom: `1px solid ${colors.greyLight}`,
+    padding: '8px',
+    position: 'relative',
+  },
+});

-export const InnerMobileNavBar = styled('div')`
-  && {
-    border-radius: 4px;
-    background-color: ${colors.greyLight};
-    color: ${colors.white};
-    width: 100%;
-    padding: 0px 5px;
-    margin: 0 10px 0 0;
-  }
-`;
+export const InnerMobileNavBar = styled('div')({
+  '&&': {
+    borderRadius: '4px',
+    backgroundColor: colors.greyLight,
+    color: colors.white,
+    width: '100%',
+    padding: '0px 5px',
+    margin: '0 10px 0 0',
+  },
+});

-export const IconSearchButton = styled(IconButton)`
-  && {
-    display: block;
-  }
-`;
+export const IconSearchButton = styled(IconButton)({
+  '&&': {
+    display: 'block',
+  },
+});

-export const SearchWrapper = styled('div')`
-  && {
-    display: none;
-    max-width: 393px;
-    width: 100%;
-  }
-`;
+export const SearchWrapper = styled('div')({
+  '&&': {
+    display: 'none',
+    maxWidth: '393px',
+    width: '100%',
+  },
+});

 export const NavBar = styled(AppBar)`
  && {
--- a/src/components/Help/styles.ts
+++ b/src/components/Help/styles.ts
@@ -2,15 +2,15 @@ import Card from '@material-ui/core/Card';
 import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';

-export const CardStyled = styled(Card)`
-  && {
-    width: 600px;
-    margin: auto;
-  }
-`;
+export const CardStyled = styled(Card)({
+  '&&': {
+    width: '600px',
+    margin: 'auto',
+  },
+});

-export const HelpTitle = styled(Typography)`
-  && {
-    margin-bottom: 20px;
-  }
-`;
+export const HelpTitle = styled(Typography)({
+  '&&': {
+    marginBottom: '20px',
+  },
+});
--- a/src/components/Icon/styles.ts
+++ b/src/components/Icon/styles.ts
@@ -48,9 +48,9 @@ export const ImgWrapper: StyledOtherComponent<
  }
 `;

-export const Img = styled('img')`
-  && {
-    width: 100%;
-    height: auto;
-  }
-`;
+export const Img = styled('img')({
+  '&&': {
+    width: '100%',
+    height: 'auto',
+  },
+});
--- a/src/components/Install/styles.ts
+++ b/src/components/Install/styles.ts
@@ -3,21 +3,21 @@ import ListItem from '@material-ui/core/ListItem';
 import Typography from '@material-ui/core/Typography';
 import styled from 'react-emotion';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    textTransform: 'capitalize',
+  },
+});

-export const InstallItem = styled(ListItem)`
-  && {
-    padding: 0;
-  }
-`;
+export const InstallItem = styled(ListItem)({
+  '&&': {
+    padding: 0,
+  },
+});

-export const PackageMangerAvatar = styled(Avatar)`
-  && {
-    border-radius: 0px;
-  }
-`;
+export const PackageMangerAvatar = styled(Avatar)({
+  '&&': {
+    borderRadius: '0px',
+  },
+});
--- a/src/components/Layout/Layout.tsx
+++ b/src/components/Layout/Layout.tsx
@@ -1,14 +1,14 @@
 import styled, { css } from 'react-emotion';

-export const Content = styled('div')`
-  && {
-    background-color: #ffffff;
-    flex: 1;
-    display: flex;
-    position: relative;
-    flex-direction: column;
-  }
-`;
+export const Content = styled('div')({
+  '&&': {
+    backgroundColor: '#ffffff',
+    flex: 1,
+    display: 'flex',
+    position: 'relative',
+    flexDirection: 'column',
+  },
+});

 export const Container = styled('div')`
  && {
--- a/src/components/Loading/snapshots/Loading.test.tsx.snap
+++ b/src/components/Loading/snapshots/Loading.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Loading /> component should render the component in default state 1`] = `"<div class=\\"css-1221txa eimgwje0\\"><div class=\\"css-bxochs eimgwje1\\"><div class=\\"css-kt1gx0 em793ed0\\"></div></div><div class=\\"css-vqrgi e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root-1 MuiCircularProgress-colorPrimary-4 MuiCircularProgress-indeterminate-3 css-15gl0ho e1ag4h8b1\\" style=\\"width:50px;height:50px\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg-6\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle-7 MuiCircularProgress-circleIndeterminate-9\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div></div>"`;
+exports[`<Loading /> component should render the component in default state 1`] = `"<div class=\\"css-1221txa eimgwje0\\"><div class=\\"css-bxochs eimgwje1\\"><div class=\\"css-ge0nak em793ed0\\"></div></div><div class=\\"css-vqrgi e1ag4h8b0\\"><div class=\\"MuiCircularProgress-root-1 MuiCircularProgress-colorPrimary-4 MuiCircularProgress-indeterminate-3 css-15gl0ho e1ag4h8b1\\" style=\\"width:50px;height:50px\\" role=\\"progressbar\\"><svg class=\\"MuiCircularProgress-svg-6\\" viewBox=\\"22 22 44 44\\"><circle class=\\"MuiCircularProgress-circle-7 MuiCircularProgress-circleIndeterminate-9\\" cx=\\"44\\" cy=\\"44\\" r=\\"20.2\\" fill=\\"none\\" stroke-width=\\"3.6\\"></circle></svg></div></div></div>"`;
--- a/src/components/Login/styles.ts
+++ b/src/components/Login/styles.ts
@@ -5,16 +5,16 @@ export const loginDialog = css({
  minWidth: '300px',
 });

-export const loginError = css`
-  background-color: ${colors.red} !important;
-  min-width: inherit !important;
-  margin-bottom: 10px !important;
-`;
+export const loginError = css({
+  backgroundColor: `${colors.red} !important`,
+  minWidth: 'inherit !important',
+  marginBottom: '10px !important',
+});

-export const loginErrorMsg = css`
-  display: flex;
-  align-items: center;
-`;
+export const loginErrorMsg = css({
+  display: 'flex',
+  alignItems: 'center',
+});

 export const loginIcon = css({
  opacity: 0.9,
--- a/src/components/Logo/Logo.tsx
+++ b/src/components/Logo/Logo.tsx
@@ -23,6 +23,7 @@ const StyledLogo = styled('div')<Props>`
    background-repeat: no-repeat;
    width: ${({ size }) => size};
    height: ${({ size }) => size};
+  }
 `;
 const Logo: React.FC<Props> = ({ size = Size.Small }) => {
  return <StyledLogo size={size} />;
--- a/src/components/Logo/snapshots/Logo.test.tsx.snap
+++ b/src/components/Logo/snapshots/Logo.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`<Logo /> component should render the component in default state 1`] = `"<div class=\\"css-1tnu3ib em793ed0\\"></div>"`;
+exports[`<Logo /> component should render the component in default state 1`] = `"<div class=\\"css-1sifsqk em793ed0\\"></div>"`;
--- a/src/components/NotFound/styles.ts
+++ b/src/components/NotFound/styles.ts
@@ -3,39 +3,39 @@ 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 Wrapper = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  flex: 1,
+  padding: '16px',
+});

-export const Inner = styled('div')`
-  max-width: 650px;
-  display: flex;
-  flex-direction: column;
-`;
+export const Inner = styled('div')({
+  maxWidth: '650px',
+  display: 'flex',
+  flexDirection: 'column',
+});

-export const EmptyPackage = styled('img')`
-  width: 150px;
-  margin: 0 auto;
-`;
+export const EmptyPackage = styled('img')({
+  width: '150px',
+  margin: '0 auto',
+});

-export const Heading = styled(Typography)`
-  && {
-    color: #4b5e40;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    color: '#4b5e40',
+  },
+});

-export const List = styled(MuiList)`
-  && {
-    padding: 0;
-    color: #4b5e40;
-  }
-`;
+export const List = styled(MuiList)({
+  '&&': {
+    padding: 0,
+    color: '#4b5e40',
+  },
+});

-export const Card = styled(MuiCard)`
-  margin-top: 24px;
-`;
+export const Card = styled(MuiCard)({
+  marginTop: '24px',
+});
--- a/src/components/Package/styles.ts
+++ b/src/components/Package/styles.ts
@@ -34,57 +34,57 @@ export const OverviewItem = styled('span')`
  }
 `;

-export const Icon = styled(Ico)`
-  && {
-    margin: 2px 10px 0px 0;
-    fill: ${colors.greyLight2};
-  }
-`;
+export const Icon = styled(Ico)({
+  '&&': {
+    margin: '2px 10px 0px 0',
+    fill: colors.greyLight2,
+  },
+});

-export const Published = styled('span')`
-  && {
-    color: ${colors.greyLight2};
-    margin: 0px 5px 0px 0px;
-  }
-`;
+export const Published = styled('span')({
+  '&&': {
+    color: colors.greyLight2,
+    margin: '0px 5px 0px 0px',
+  },
+});

 // @ts-ignore
-export const Text = styled(Label)`
-  && {
-    font-size: 12px;
-    font-weight: 500;
-    color: ${colors.greyLight2};
-  }
-`;
+export const Text = styled(Label)({
+  '&&': {
+    fontSize: '12px',
+    fontWeight: 500,
+    color: colors.greyLight2,
+  },
+});

-export const Details = styled('span')`
-  && {
-    margin-left: 5px;
-    line-height: 1.5;
-    display: flex;
-    flex-direction: column;
-  }
-`;
+export const Details = styled('span')({
+  '&&': {
+    marginLeft: '5px',
+    lineHeight: 1.5,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});

-export const Author = styled('div')`
-  && {
-    display: flex;
-    align-items: center;
-  }
-`;
+export const Author = styled('div')({
+  '&&': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});

-export const Avatar = styled(Photo)`
-  && {
-    width: 20px;
-    height: 20px;
-  }
-`;
+export const Avatar = styled(Photo)({
+  '&&': {
+    width: '20px',
+    height: '20px',
+  },
+});

-export const WrapperLink = styled(Link)`
-  && {
-    text-decoration: none;
-  }
-`;
+export const WrapperLink = styled(Link)({
+  '&&': {
+    textDecoration: 'none',
+  },
+});

 export const PackageTitle = styled('span')`
  && {
@@ -106,31 +106,31 @@ export const PackageTitle = styled('span')`
  }
 `;

-export const GridRightAligned = styled(Grid)`
-  && {
-    text-align: right;
-  }
-`;
+export const GridRightAligned = styled(Grid)({
+  '&&': {
+    textAlign: 'right',
+  },
+});

-export const PackageList = styled(List)`
-  && {
-    padding: 12px 0 12px 0;
+export const PackageList = styled(List)({
+  '&&': {
+    padding: '12px 0 12px 0',

-    &:hover {
-      background-color: ${colors.greyLight3};
-    }
-  }
-`;
+    '&:hover': {
+      backgroundColor: colors.greyLight3,
+    },
+  },
+});

-export const IconButton = styled(MuiIconButton)`
-  && {
-    padding: 6px;
+export const IconButton = styled(MuiIconButton)({
+  '&&': {
+    padding: '6px',

-    svg {
-      font-size: 16px;
-    }
-  }
-`;
+    svg: {
+      fontSize: '16px',
+    },
+  },
+});

 export const TagContainer = styled('span')`
  && {
@@ -143,20 +143,20 @@ export const TagContainer = styled('span')`
  }
 `;

-export const PackageListItem = styled(ListItem)`
-  && {
-    padding-top: 0;
-  }
-`;
+export const PackageListItem = styled(ListItem)({
+  '&&': {
+    paddingTop: 0,
+  },
+});

-export const PackageListItemText = styled(ListItemText)`
-  && {
-    padding-right: 0;
-  }
-`;
+export const PackageListItemText = styled(ListItemText)({
+  '&&': {
+    paddingRight: 0,
+  },
+});

-export const Description = styled(Typography)`
-  color: ${colors.greyDark2};
-  font-size: 14px;
-  padding-right: 0;
-`;
+export const Description = styled(Typography)({
+  color: colors.greyDark2,
+  fontSize: '14px',
+  paddingRight: 0,
+});
--- a/src/components/RegistryInfoContent/styles.ts
+++ b/src/components/RegistryInfoContent/styles.ts
@@ -1,7 +1,7 @@
 import styled from 'react-emotion';

-export const CommandContainer = styled('div')`
-  && {
-    padding-top: 20px;
-  }
-`;
+export const CommandContainer = styled('div')({
+  '&&': {
+    paddingTop: '20px',
+  },
+});
--- a/src/components/RegistryInfoDialog/styles.ts
+++ b/src/components/RegistryInfoDialog/styles.ts
@@ -4,16 +4,16 @@ import DialogContent from '@material-ui/core/DialogContent';
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';

-export const Title = styled(DialogTitle)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-    font-size: ${fontSize.lg};
-  }
-`;
+export const Title = styled(DialogTitle)({
+  '&&': {
+    backgroundColor: colors.primary,
+    color: colors.white,
+    fontSize: fontSize.lg,
+  },
+});

-export const Content = styled(DialogContent)`
-  && {
-    padding: 0 24px;
-  }
-`;
+export const Content = styled(DialogContent)({
+  '&&': {
+    padding: '0 24px',
+  },
+});
--- a/src/components/Repository/styles.ts
+++ b/src/components/Repository/styles.ts
@@ -6,36 +6,36 @@ import Typography from '@material-ui/core/Typography';
 import Github from '../../icons/GitHub';
 import colors from '../../utils/styles/colors';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-    text-transform: capitalize;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+    textTransform: 'capitalize',
+  },
+});

-export const GridRepo = styled(Grid)`
-  && {
-    align-items: center;
-  }
-`;
+export const GridRepo = styled(Grid)({
+  '&&': {
+    alignItems: 'center',
+  },
+});

-export const GithubLink = styled('a')`
-  && {
-    color: ${colors.primary};
-  }
-`;
+export const GithubLink = styled('a')({
+  '&&': {
+    color: colors.primary,
+  },
+});

-export const GithubLogo = styled(Github)`
-  && {
-    font-size: 40px;
-    color: ${colors.primary};
-    background-color: ${colors.greySuperLight};
-  }
-`;
+export const GithubLogo = styled(Github)({
+  '&&': {
+    fontSize: '40px',
+    color: colors.primary,
+    backgroundColor: colors.greySuperLight,
+  },
+});

-export const RepositoryListItem = styled(ListItem)`
-  && {
-    padding-left: 0;
-    padding-right: 0;
-  }
-`;
+export const RepositoryListItem = styled(ListItem)({
+  '&&': {
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+});
--- a/src/components/Spinner/styles.ts
+++ b/src/components/Spinner/styles.ts
@@ -20,8 +20,8 @@ export const Wrapper = styled('div')`
  }
 `;

-export const Circular = styled(CircularProgress)`
-  && {
-    color: ${colors.primary};
-  }
-`;
+export const Circular = styled(CircularProgress)({
+  '&&': {
+    color: colors.primary,
+  },
+});
--- a/src/components/Tag/styles.ts
+++ b/src/components/Tag/styles.ts
@@ -1,13 +1,13 @@
 import styled from 'react-emotion';

-export const Wrapper = styled('span')`
-  && {
-    vertical-align: middle;
-    line-height: 22px;
-    border-radius: 2px;
-    color: #485a3e;
-    background-color: #f3f4f2;
-    padding: 0.22rem 0.4rem;
-    margin: 8px 8px 0 0;
-  }
-`;
+export const Wrapper = styled('span')({
+  '&&': {
+    verticalAlign: 'middle',
+    lineHeight: '22px',
+    borderRadius: '2px',
+    color: '#485a3e',
+    backgroundColor: '#f3f4f2',
+    padding: '0.22rem 0.4rem',
+    margin: '8px 8px 0 0',
+  },
+});
--- a/src/components/UpLinks/styles.ts
+++ b/src/components/UpLinks/styles.ts
@@ -2,23 +2,23 @@ import styled from 'react-emotion';
 import Typography from '@material-ui/core/Typography';
 import { default as MuiListItemText } from '@material-ui/core/ListItemText';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+  },
+});

-export const Spacer = styled('div')`
-  flex: 1 1 auto;
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
-  white-space: nowrap;
-  height: 0.5em;
-`;
+export const Spacer = styled('div')({
+  flex: '1 1 auto',
+  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
+  whiteSpace: 'nowrap',
+  height: '0.5em',
+});

-export const ListItemText = styled(MuiListItemText)`
-  && {
-    flex: none;
-    color: black;
-    opacity: 0.6;
-  }
-`;
+export const ListItemText = styled(MuiListItemText)({
+  '&&': {
+    flex: 'none',
+    color: 'black',
+    opacity: 0.6,
+  },
+});
--- a/src/components/Versions/styles.ts
+++ b/src/components/Versions/styles.ts
@@ -2,23 +2,23 @@ import styled from 'react-emotion';
 import Typography from '@material-ui/core/Typography';
 import { default as MuiListItemText } from '@material-ui/core/ListItemText';

-export const Heading = styled(Typography)`
-  && {
-    font-weight: 700;
-  }
-`;
+export const Heading = styled(Typography)({
+  '&&': {
+    fontWeight: 700,
+  },
+});

-export const Spacer = styled('div')`
-  flex: 1 1 auto;
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
-  white-space: nowrap;
-  height: 0.5em;
-`;
+export const Spacer = styled('div')({
+  flex: '1 1 auto',
+  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
+  whiteSpace: 'nowrap',
+  height: '0.5em',
+});

-export const ListItemText = styled(MuiListItemText)`
-  && {
-    flex: none;
-    color: black;
-    opacity: 0.6;
-  }
-`;
+export const ListItemText = styled(MuiListItemText)({
+  '&&': {
+    flex: 'none',
+    color: 'black',
+    opacity: 0.6,
+  },
+});
--- a/src/history.ts
+++ b/src/history.ts
@@ -1,8 +0,0 @@
-import { createBrowserHistory } from 'history';
-import { getBaseNamePath } from './utils/url';
-
-const history = createBrowserHistory({
-  basename: getBaseNamePath(),
-});
-
-export default history;
--- a/src/pages/version/styles.ts
+++ b/src/pages/version/styles.ts
@@ -3,10 +3,10 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import colors from '../../utils/styles/colors';
 import { fontSize } from '../../utils/styles/sizes';

-export const Title = styled(DialogTitle)`
-  && {
-    background-color: ${colors.primary};
-    color: ${colors.white};
-    font-size: ${fontSize.lg};
-  }
-`;
+export const Title = styled(DialogTitle)({
+  '&&': {
+    backgroundColor: colors.primary,
+    color: colors.white,
+    fontSize: fontSize.lg,
+  },
+});
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -2,12 +2,16 @@

 import React, { Component, ReactElement } from 'react';
 import { Router, Route, Switch } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
 import { AppContextConsumer, AppStateInterface } from './App/App';

 import { asyncComponent } from './utils/asyncComponent';
-import history from './history';
 import Header from './components/Header';

+const history = createBrowserHistory({
+  basename: window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix,
+});
+
 const NotFound = asyncComponent(() => import('./components/NotFound'));
 const VersionPackage = asyncComponent(() => import('./pages/version/Version'));
 const HomePage = asyncComponent(() => import('./pages/home'));
--- a/src/utils/api.test.ts
+++ b/src/utils/api.test.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
+
+import { handleResponseType } from '../../src/utils/api';
+
+describe('api', () => {
+  // no the best mock, but I'd look for a mock library to work with fetch in the future
+  // @ts-ignore
+  const headers: Headers = {
+    // @ts-ignore
+    get: () => [],
+  };
+
+  describe('handleResponseType', () => {
+    test('should test tgz scenario', async () => {
+      const blob = new Blob(['foo']);
+      const blobPromise = Promise.resolve<Blob>(blob);
+      const response: Response = {
+        url: 'http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz',
+        blob: () => blobPromise,
+        ok: true,
+        headers,
+      } as Response;
+      const handled = await handleResponseType(response);
+
+      expect(handled).toEqual([true, blob]);
+    });
+  });
+});
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -6,7 +6,7 @@ import '../../types';
 * @param {object} response
 * @returns {promise}
 */
-function handleResponseType(response: Response): Promise<[boolean, Blob | string]> | Promise<void> {
+export function handleResponseType(response: Response): Promise<[boolean, Blob | string]> | Promise<void> {
  if (response.headers) {
    const contentType = response.headers.get('Content-Type') as string;
    if (contentType.includes('application/pdf')) {
@@ -19,22 +19,27 @@ function handleResponseType(response: Response): Promise<[boolean, Blob | string
    if (contentType.includes('text/')) {
      return Promise.all([response.ok, response.text()]);
    }
+
+    // unfortunatelly on download files there is no header available
+    if (response.url && response.url.endsWith('.tgz') !== null) {
+      return Promise.all([response.ok, response.blob()]);
+    }
  }

  return Promise.resolve();
 }

 class API {
-  public request<T>(url: string, method = 'GET', options?: RequestInit): Promise<T> {
+  public request<T>(url: string, method = 'GET', options: RequestInit = { headers: {} }): Promise<T> {
    if (!window.VERDACCIO_API_URL) {
      throw new Error('VERDACCIO_API_URL is not defined!');
    }

    const token = storage.getItem('token');
-    const headers = new Headers(options && options.headers);
-    if (token && options && options.headers) {
-      headers.set('Authorization', `Bearer ${token}`);
-      options.headers = Object.assign(options.headers, headers);
+    if (token && options.headers && typeof options.headers['Authorization'] === 'undefined') {
+      options.headers = Object.assign({}, options.headers, {
+        ['Authorization']: `Bearer ${token}`,
+      });
    }

    if (!['http://', 'https://', '//'].some(prefix => url.startsWith(prefix))) {
@@ -50,11 +55,11 @@ class API {
      })
        // @ts-ignore
        .then(handleResponseType)
-        .then(([responseOk, body]) => {
-          if (responseOk) {
-            resolve(body);
+        .then(response => {
+          if (response[0]) {
+            resolve(response[1]);
          } else {
-            reject(body);
+            reject(new Error('something went wrong'));
          }
        })
        .catch(error => {
--- a/src/utils/url.test.ts
+++ b/src/utils/url.test.ts
@@ -0,0 +1,36 @@
+import { isURL, isEmail, getRegistryURL, extractFileName } from './url';
+
+describe('utils', () => {
+  describe('url', () => {
+    test('isURL() - should return true for localhost', () => {
+      expect(isURL('http://localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz')).toBeTruthy();
+    });
+
+    test('isURL() - should return false when protocol is missing', () => {
+      expect(isURL('localhost:8080/bootstrap/-/bootstrap-4.3.1.tgz')).toBeFalsy();
+    });
+
+    test('isEmail() - should return true if valid', () => {
+      expect(isEmail('email@domain.com')).toBeTruthy();
+    });
+    test('isEmail() - should return false if invalid', () => {
+      expect(isEmail('')).toBeFalsy();
+    });
+
+    test('getRegistryURL() - should keep slash if location is a sub directory', () => {
+      history.pushState({}, 'page title', '/-/web/detail');
+      expect(getRegistryURL()).toBe('http://localhost/-/web/detail');
+      history.pushState({}, 'page title', '/');
+    });
+
+    test('getRegistryURL() - should not add slash if location is not a sub directory', () => {
+      expect(getRegistryURL()).toBe('http://localhost');
+    });
+  });
+
+  describe('extractFileName', () => {
+    test('should return the file name', () => {
+      expect(extractFileName('http://localhost:4872/juan_test_webpack1/-/test-10.0.0.tgz')).toBe('test-10.0.0.tgz');
+    });
+  });
+});
--- a/src/utils/url.ts
+++ b/src/utils/url.ts
@@ -2,10 +2,11 @@ import isURLValidator from 'validator/lib/isURL';
 import isEmailValidator from 'validator/lib/isEmail';
 import '../../types';

-export function isURL(url): boolean {
+export function isURL(url: string): boolean {
  return isURLValidator(url || '', {
    protocols: ['http', 'https', 'git+https'],
    require_protocol: true,
+    require_tld: false,
  });
 }

@@ -18,10 +19,19 @@ export function getRegistryURL(): string {
  return `${location.origin}${location.pathname === '/' ? '' : location.pathname}`;
 }

-export function getBaseNamePath(): string {
-  return window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix;
+export function extractFileName(url: string): string {
+  return url.substring(url.lastIndexOf('/') + 1);
 }

-export function getRootPath(): string {
-  return window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.base;
+export function downloadFile(fileStream: Blob, fileName: string): void {
+  const file = new File([fileStream], fileName, { type: 'application/octet-stream', lastModified: Date.now() });
+  const objectURL = URL.createObjectURL(file);
+  const fileLink = document.createElement('a');
+  fileLink.href = objectURL;
+  fileLink.download = fileName;
+  fileLink.click();
+  // firefox requires remove the object url
+  setTimeout(() => {
+    URL.revokeObjectURL(objectURL);
+  }, 150);
 }
--- a/tools/dev.server.js
+++ b/tools/dev.server.js
@@ -32,7 +32,7 @@ new WebpackDevServer(compiler, {
  },
  proxy: [
    {
-      context: ['/-/verdaccio/logo', '/-/verdaccio/packages', '/-/static/logo.png'],
+      context: ['/-/verdaccio/**', '**/*.tgz'],
      target: 'http://localhost:8080',
    },
  ],
--- a/tools/webpack.dev.config.babel.js
+++ b/tools/webpack.dev.config.babel.js
@@ -41,7 +41,7 @@ export default {
      scope: '',
      logo: 'https://verdaccio.org/img/logo/symbol/svg/verdaccio-tiny.svg',
      filename: 'index.html',
-      verdaccioURL: '//localhost:8080',
+      verdaccioURL: '//localhost:4872',
      template: `${env.SRC_ROOT}/template/index.html`,
      debug: true,
      inject: true,
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Juan Picado @jotadeveloper	240535ddad	chore(release): 0.2.2	2019-07-29 16:33:18 +02:00
Juan Picado @jotadeveloper	3c6fe5d947	Merge pull request #110 from verdaccio/issue-token fix: download protected tarballs	2019-07-29 16:32:27 +02:00
Juan Picado @jotadeveloper	f8374084b5	test: add scenario for handleResponseType tgz	2019-07-29 08:42:37 +02:00
Juan Picado @jotadeveloper	8c9cffbc6a	test: add scenario for action bar Wether the metadata has a tarball distribution file	2019-07-29 00:12:14 +02:00
Juan Picado @jotadeveloper	62431038bb	chore: improve types and checks	2019-07-28 17:51:46 +02:00
Juan Picado @jotadeveloper	12974ea54f	test: add unit test for extractFileName	2019-07-28 16:44:31 +02:00
Juan Picado @jotadeveloper	f47ab2490b	refactor: add download file method	2019-07-28 14:12:18 +02:00
Juan Picado @jotadeveloper	83b6a9d247	chore: update snapshots for actionbar	2019-07-28 11:59:58 +02:00
Juan Picado @jotadeveloper	5c484bba9a	fix: proxy webpack setting - it allows download tarballls in the same origin - update webpack dev server - add scenario for blob	2019-07-28 11:53:23 +02:00
Juan Picado @jotadeveloper	9d006ad6f7	chore: first try to download files with fetch	2019-07-28 11:53:23 +02:00
Juan Picado @jotadeveloper	fd74c52bd1	fix: token were not being send it	2019-07-28 11:53:22 +02:00
Juan Picado @jotadeveloper	a25fc6ec78	chore: upgrade dependencies it upgrade non key dependencies	2019-07-28 00:10:53 +02:00
Juan Picado @jotadeveloper	64c003943c	Merge pull request #104 from verdaccio/97-unify-emotion-css-definition-format Part of 97 - Unify Emotion CSS format	2019-07-16 16:30:30 +02:00
Sergio Herrera Guzmán	115be1bb6e	refactor: move cascaded CSS from templates to JS objects	2019-07-16 16:15:56 +02:00
Sergio Herrera Guzmán	8ea017d871	refactor: move basic CSS from templates to JS objects	2019-07-16 14:59:54 +02:00
Sergio Herrera Guzmán	786da9975f	chore: disable stylelint on files with no CSS templates	2019-07-16 14:59:54 +02:00
Juan Picado @jotadeveloper	684e989fbd	Merge pull request #103 from verdaccio/fix-commitlint chore: execute commitlint on commit-msg and not pre-commit	2019-07-15 14:58:04 +02:00
Juan Picado @jotadeveloper	4dd953e553	Merge branch '4.x-master' into fix-commitlint	2019-07-15 14:57:03 +02:00
Juan Picado @jotadeveloper	9343503372	Merge pull request #106 from verdaccio/bugfix-css-logo fix: css repetition is not closed in Logo component	2019-07-15 14:50:25 +02:00
Sergio Herrera Guzmán	ec243b1352	fix: css repetition is not closed in Logo component	2019-07-15 14:43:44 +02:00
Sergio Herrera Guzmán	2ffb2b5bf1	chore: execute commitlint on commit-msg and not pre-commit	2019-07-14 18:08:48 +02:00
Juan Picado @jotadeveloper	cad5ac91e7	Merge pull request #101 from griffithtp/fix/76_download-button-hidden-for-localhost fix: 76 download button hidden for localhost	2019-07-14 14:27:44 +02:00
Griffithtp	ecc4521314	refactor: remove getBaseNamePath() and history.ts	2019-07-14 12:50:47 +01:00
Griffithtp	795544a14c	test: add unit test for url utils	2019-07-13 15:46:08 +01:00
Daniel Ruf	67fff03b87	Merge branch '4.x-master' into fix/76_download-button-hidden-for-localhost	2019-07-13 14:01:29 +02:00
Griffithtp	5148fdca66	refactor: add @types/validator	2019-07-13 07:53:23 +01:00
Juan Picado @jotadeveloper	46ae0d21a3	Merge pull request #98 from verdaccio/dependabot/npm_and_yarn/lodash.merge-4.6.2 chore(deps): bump lodash.merge from 4.6.1 to 4.6.2	2019-07-11 22:20:51 +02:00
Juan Picado @jotadeveloper	9ade2a0ee7	Merge branch '4.x-master' into dependabot/npm_and_yarn/lodash.merge-4.6.2	2019-07-11 22:20:46 +02:00
Juan Picado @jotadeveloper	e346819035	Merge pull request #99 from verdaccio/dependabot/npm_and_yarn/lodash.template-4.5.0 chore(deps): bump lodash.template from 4.4.0 to 4.5.0	2019-07-11 22:20:30 +02:00
dependabot[bot]	46e5f09dbf	chore(deps): bump lodash.template from 4.4.0 to 4.5.0 Bumps [lodash.template](https://github.com/lodash/lodash) from 4.4.0 to 4.5.0. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/compare/4.4.0...4.5.0) Signed-off-by: dependabot[bot] <support@github.com>	2019-07-11 07:17:47 +00:00
Griffithtp	cca2c3c0d7	fix: localhost domain download tarball button	2019-07-10 23:51:25 +01:00
dependabot[bot]	c814080957	chore(deps): bump lodash.merge from 4.6.1 to 4.6.2 Bumps [lodash.merge](https://github.com/lodash/lodash) from 4.6.1 to 4.6.2. - [Release notes](https://github.com/lodash/lodash/releases) - [Commits](https://github.com/lodash/lodash/commits) Signed-off-by: dependabot[bot] <support@github.com>	2019-07-10 22:51:21 +00:00