chore(release): 0.2.2

fix: download protected tarballs

.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,

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)
 

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",
+    "@octokit/rest": "16.28.7",
-    "@types/enzyme": "3.9.3",
+    "@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",
+    "@types/validator": "10.11.1",
-    "@verdaccio/eslint-config": "0.0.1",
+    "@verdaccio/babel-preset": "2.0.0",
-    "@verdaccio/types": "6.1.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": "4.1.0",
-    "verdaccio-auth-memory": "0.0.4",
+    "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-cli": "3.3.6",
-    "webpack-dev-server": "3.2.1",
+    "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",

src/App/styles.ts

@@ -1,15 +1,15 @@
 import { css } from 'emotion';
 import colors from '../utils/styles/colors';
 
-export const alertError = css`
+export const alertError = css({
-  background-color: ${colors.red} !important;
+  backgroundColor: `${colors.red} !important`,
-  min-width: inherit !important;
+  minWidth: 'inherit !important',
-`;
+});
 
-export const alertErrorMsg = css`
+export const alertErrorMsg = css({
-  display: flex;
+  display: 'flex',
-  align-items: center;
+  alignItems: 'center',
-`;
+});
 
 export const alertIcon = css({
   opacity: 0.9,

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);
+  });
 });

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>;
+        const actionItem: Action = ACTIONS[value];
-        component.push(
+        if (actionItem.handler) {
-          // @ts-ignore
+          const fab = (
-          <Tooltip key={key} title={ACTIONS[value]['title']}>
+            <Tooltip key={key} title={actionItem['title']}>
-            <>{this.renderIconsWithLink(link, fab)}</>
+              <Fab
-          </Tooltip>
+                /* 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;
     }, []);

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>"`;

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)`
+export const ActionListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-top: 0;
+    paddingTop: 0,
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});
 
-export const Fab = styled(MuiFab)`
+export const Fab = styled(MuiFab)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-    margin-right: 10px;
+    marginRight: '10px',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
-export const AuthorListItem = styled(ListItem)`
+export const AuthorListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});

src/components/AutoComplete/styles.tsx

@@ -8,14 +8,14 @@ export interface InputFieldProps {
   color: string;
 }
 
-export const Wrapper = styled('div')`
+export const Wrapper = styled('div')({
-  && {
+  '&&': {
-    width: 100%;
+    width: '100%',
-    height: 32px;
+    height: '32px',
-    position: relative;
+    position: 'relative',
-    z-index: 1;
+    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)`
+export const SuggestionContainer = styled(Paper)({
-  && {
+  '&&': {
-    max-height: 500px;
+    maxHeight: '500px',
-    overflow-y: auto;
+    overflowY: 'auto',
-  }
+  },
-`;
+});

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')`
+export const ClipBoardCopy = styled('div')({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: space-between;
+    justifyContent: 'space-between',
-  }
+  },
-`;
+});
 
-export const ClipBoardCopyText = styled('span')`
+export const ClipBoardCopyText = styled('span')({
-  && {
+  '&&': {
-    display: inline-block;
+    display: 'inline-block',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-    overflow: hidden;
+    overflow: 'hidden',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    height: 21px;
+    height: '21px',
-  }
+  },
-`;
+});
 
-export const CopyIcon = styled(IconButton)`
+export const CopyIcon = styled(IconButton)({
-  && {
+  '&&': {
-    margin: 0 0 0 10px;
+    margin: '0 0 0 10px',
-  }
+  },
-`;
+});

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)`
+export const CardWrap = styled(Card)({
-  && {
+  '&&': {
-    margin: 0 0 16px;
+    margin: '0 0 16px',
-  }
+  },
-`;
+});
 
-export const Heading = styled(Typography)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const Tags = styled('div')`
+export const Tags = styled('div')({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    justify-content: start;
+    justifyContent: 'start',
-    flex-wrap: wrap;
+    flexWrap: 'wrap',
-    margin: 0 -5px;
+    margin: '0 -5px',
-  }
+  },
-`;
+});
 
-export const Tag = styled(Chip)`
+export const Tag = styled(Chip)({
-  && {
+  '&&': {
-    margin: 5px;
+    margin: '5px',
-  }
+  },
-`;
+});

src/components/DetailContainer/styles.ts

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

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)`
+export const TitleListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-    padding-bottom: 0;
+    paddingBottom: 0,
-  }
+  },
-`;
+});
 
-export const TitleListItemText = styled(ListItemText)`
+export const TitleListItemText = styled(ListItemText)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-    padding-top: 8px;
+    paddingTop: '8px',
-  }
+  },
-`;
+});
 
-export const TitleAvatar = styled(Avatar)`
+export const TitleAvatar = styled(Avatar)({
-  && {
+  '&&': {
-    color: ${colors.greySuperLight};
+    color: colors.greySuperLight,
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});

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')`
+export const Details = styled('span')({
-  display: flex;
+  display: 'flex',
-  flex-direction: column;
+  flexDirection: 'column',
-  align-items: center;
+  alignItems: 'center',
-`;
+});
 
-export const Content = styled('div')`
+export const Content = styled('div')({
-  margin: 10px 0 10px 0;
+  margin: '10px 0 10px 0',
-  display: flex;
+  display: 'flex',
-  flex-wrap: wrap;
+  flexWrap: 'wrap',
-  > * {
+  '> *': {
-    margin: 5px;
+    margin: '5px',
-  }
+  },
-`;
+});
 
-export const Heading = styled(Typography)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    margin-bottom: 10px;
+    marginBottom: '10px',
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const Fab = styled(MuiFab)`
+export const Fab = styled(MuiFab)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const DistListItem = styled(ListItem)`
+export const DistListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});
 
-export const DistChips = styled(Chip)`
+export const DistChips = styled(Chip)({
-  && {
+  '&&': {
-    margin-right: 5px;
+    marginRight: '5px',
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const DownloadButton = styled(MuiFab)`
+export const DownloadButton = styled(MuiFab)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const EngineListItem = styled(ListItem)`
+export const EngineListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-  }
+  },
-`;
+});

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')`
+export const Wrapper = styled('div')({
-  && {
+  '&&': {
-    background: ${colors.snow};
+    background: colors.snow,
-    border-top: 1px solid ${colors.greyGainsboro};
+    borderTop: `1px solid ${colors.greyGainsboro}`,
-    color: ${colors.nobel01};
+    color: colors.nobel01,
-    font-size: 14px;
+    fontSize: '14px',
-    padding: 20px;
+    padding: '20px',
-  }
+  },
-`;
+});
 
 export const Inner = styled('div')`
   && {
@@ -50,24 +50,24 @@ export const Left = styled('div')`
   }
 `;
 
-export const Right = styled(Left)`
+export const Right = styled(Left)({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-  }
+  },
-`;
+});
 
-export const ToolTip = styled('span')`
+export const ToolTip = styled('span')({
-  && {
+  '&&': {
-    position: relative;
+    position: 'relative',
-    height: 18px;
+    height: '18px',
-  }
+  },
-`;
+});
 
-export const Earth = styled(Icon)`
+export const Earth = styled(Icon)({
-  && {
+  '&&': {
-    padding: 0 10px;
+    padding: '0 10px',
-  }
+  },
-`;
+});
 
 export const Flags = styled('span')`
   && {
@@ -96,17 +96,17 @@ export const Flags = styled('span')`
   }
 `;
 
-export const Love = styled('span')`
+export const Love = styled('span')({
-  && {
+  '&&': {
-    color: ${colors.love};
+    color: colors.love,
-    padding: 0 5px;
+    padding: '0 5px',
-  }
+  },
-`;
+});
 
-export const Flag = styled(Icon)`
+export const Flag = styled(Icon)({
-  && {
+  '&&': {
-    padding: 0 5px;
+    padding: '0 5px',
-  }
+  },
-`;
+});
 
 export const Logo = Flag;

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>"`;

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)`
+export const InnerNavBar = styled(Toolbar)({
-  && {
+  '&&': {
-    justify-content: space-between;
+    justifyContent: 'space-between',
-    align-items: center;
+    alignItems: 'center',
-    padding: 0 15px;
+    padding: '0 15px',
-  }
+  },
-`;
+});
 
-export const Greetings = styled('span')`
+export const Greetings = styled('span')({
-  && {
+  '&&': {
-    margin: 0 5px 0 0;
+    margin: '0 5px 0 0',
-  }
+  },
-`;
+});
 
-export const RightSide = styled(Toolbar)`
+export const RightSide = styled(Toolbar)({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    padding: 0;
+    padding: 0,
-  }
+  },
-`;
+});
 
-export const LeftSide = styled(RightSide)`
+export const LeftSide = styled(RightSide)({
-  && {
+  '&&': {
-    flex: 1;
+    flex: 1,
-  }
+  },
-`;
+});
 
-export const MobileNavBar = styled('div')`
+export const MobileNavBar = styled('div')({
-  && {
+  '&&': {
-    align-items: center;
+    alignItems: 'center',
-    display: flex;
+    display: 'flex',
-    border-bottom: 1px solid ${colors.greyLight};
+    borderBottom: `1px solid ${colors.greyLight}`,
-    padding: 8px;
+    padding: '8px',
-    position: relative;
+    position: 'relative',
-  }
+  },
-`;
+});
 
-export const InnerMobileNavBar = styled('div')`
+export const InnerMobileNavBar = styled('div')({
-  && {
+  '&&': {
-    border-radius: 4px;
+    borderRadius: '4px',
-    background-color: ${colors.greyLight};
+    backgroundColor: colors.greyLight,
-    color: ${colors.white};
+    color: colors.white,
-    width: 100%;
+    width: '100%',
-    padding: 0px 5px;
+    padding: '0px 5px',
-    margin: 0 10px 0 0;
+    margin: '0 10px 0 0',
-  }
+  },
-`;
+});
 
-export const IconSearchButton = styled(IconButton)`
+export const IconSearchButton = styled(IconButton)({
-  && {
+  '&&': {
-    display: block;
+    display: 'block',
-  }
+  },
-`;
+});
 
-export const SearchWrapper = styled('div')`
+export const SearchWrapper = styled('div')({
-  && {
+  '&&': {
-    display: none;
+    display: 'none',
-    max-width: 393px;
+    maxWidth: '393px',
-    width: 100%;
+    width: '100%',
-  }
+  },
-`;
+});
 
 export const NavBar = styled(AppBar)`
   && {

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)`
+export const CardStyled = styled(Card)({
-  && {
+  '&&': {
-    width: 600px;
+    width: '600px',
-    margin: auto;
+    margin: 'auto',
-  }
+  },
-`;
+});
 
-export const HelpTitle = styled(Typography)`
+export const HelpTitle = styled(Typography)({
-  && {
+  '&&': {
-    margin-bottom: 20px;
+    marginBottom: '20px',
-  }
+  },
-`;
+});

src/components/Icon/styles.ts

@@ -48,9 +48,9 @@ export const ImgWrapper: StyledOtherComponent<
   }
 `;
 
-export const Img = styled('img')`
+export const Img = styled('img')({
-  && {
+  '&&': {
-    width: 100%;
+    width: '100%',
-    height: auto;
+    height: 'auto',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const InstallItem = styled(ListItem)`
+export const InstallItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding: 0;
+    padding: 0,
-  }
+  },
-`;
+});
 
-export const PackageMangerAvatar = styled(Avatar)`
+export const PackageMangerAvatar = styled(Avatar)({
-  && {
+  '&&': {
-    border-radius: 0px;
+    borderRadius: '0px',
-  }
+  },
-`;
+});

src/components/Layout/Layout.tsx

@@ -1,14 +1,14 @@
 import styled, { css } from 'react-emotion';
 
-export const Content = styled('div')`
+export const Content = styled('div')({
-  && {
+  '&&': {
-    background-color: #ffffff;
+    backgroundColor: '#ffffff',
-    flex: 1;
+    flex: 1,
-    display: flex;
+    display: 'flex',
-    position: relative;
+    position: 'relative',
-    flex-direction: column;
+    flexDirection: 'column',
-  }
+  },
-`;
+});
 
 export const Container = styled('div')`
   && {

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>"`;

src/components/Login/styles.ts

@@ -5,16 +5,16 @@ export const loginDialog = css({
   minWidth: '300px',
 });
 
-export const loginError = css`
+export const loginError = css({
-  background-color: ${colors.red} !important;
+  backgroundColor: `${colors.red} !important`,
-  min-width: inherit !important;
+  minWidth: 'inherit !important',
-  margin-bottom: 10px !important;
+  marginBottom: '10px !important',
-`;
+});
 
-export const loginErrorMsg = css`
+export const loginErrorMsg = css({
-  display: flex;
+  display: 'flex',
-  align-items: center;
+  alignItems: 'center',
-`;
+});
 
 export const loginIcon = css({
   opacity: 0.9,

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} />;

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>"`;

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')`
+export const Wrapper = styled('div')({
-  display: flex;
+  display: 'flex',
-  align-items: center;
+  alignItems: 'center',
-  flex-direction: column;
+  flexDirection: 'column',
-  justify-content: center;
+  justifyContent: 'center',
-  flex: 1;
+  flex: 1,
-  padding: 16px;
+  padding: '16px',
-`;
+});
 
-export const Inner = styled('div')`
+export const Inner = styled('div')({
-  max-width: 650px;
+  maxWidth: '650px',
-  display: flex;
+  display: 'flex',
-  flex-direction: column;
+  flexDirection: 'column',
-`;
+});
 
-export const EmptyPackage = styled('img')`
+export const EmptyPackage = styled('img')({
-  width: 150px;
+  width: '150px',
-  margin: 0 auto;
+  margin: '0 auto',
-`;
+});
 
-export const Heading = styled(Typography)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    color: #4b5e40;
+    color: '#4b5e40',
-  }
+  },
-`;
+});
 
-export const List = styled(MuiList)`
+export const List = styled(MuiList)({
-  && {
+  '&&': {
-    padding: 0;
+    padding: 0,
-    color: #4b5e40;
+    color: '#4b5e40',
-  }
+  },
-`;
+});
 
-export const Card = styled(MuiCard)`
+export const Card = styled(MuiCard)({
-  margin-top: 24px;
+  marginTop: '24px',
-`;
+});

src/components/Package/styles.ts

@@ -34,57 +34,57 @@ export const OverviewItem = styled('span')`
   }
 `;
 
-export const Icon = styled(Ico)`
+export const Icon = styled(Ico)({
-  && {
+  '&&': {
-    margin: 2px 10px 0px 0;
+    margin: '2px 10px 0px 0',
-    fill: ${colors.greyLight2};
+    fill: colors.greyLight2,
-  }
+  },
-`;
+});
 
-export const Published = styled('span')`
+export const Published = styled('span')({
-  && {
+  '&&': {
-    color: ${colors.greyLight2};
+    color: colors.greyLight2,
-    margin: 0px 5px 0px 0px;
+    margin: '0px 5px 0px 0px',
-  }
+  },
-`;
+});
 
 // @ts-ignore
-export const Text = styled(Label)`
+export const Text = styled(Label)({
-  && {
+  '&&': {
-    font-size: 12px;
+    fontSize: '12px',
-    font-weight: 500;
+    fontWeight: 500,
-    color: ${colors.greyLight2};
+    color: colors.greyLight2,
-  }
+  },
-`;
+});
 
-export const Details = styled('span')`
+export const Details = styled('span')({
-  && {
+  '&&': {
-    margin-left: 5px;
+    marginLeft: '5px',
-    line-height: 1.5;
+    lineHeight: 1.5,
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-  }
+  },
-`;
+});
 
-export const Author = styled('div')`
+export const Author = styled('div')({
-  && {
+  '&&': {
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-  }
+  },
-`;
+});
 
-export const Avatar = styled(Photo)`
+export const Avatar = styled(Photo)({
-  && {
+  '&&': {
-    width: 20px;
+    width: '20px',
-    height: 20px;
+    height: '20px',
-  }
+  },
-`;
+});
 
-export const WrapperLink = styled(Link)`
+export const WrapperLink = styled(Link)({
-  && {
+  '&&': {
-    text-decoration: none;
+    textDecoration: 'none',
-  }
+  },
-`;
+});
 
 export const PackageTitle = styled('span')`
   && {
@@ -106,31 +106,31 @@ export const PackageTitle = styled('span')`
   }
 `;
 
-export const GridRightAligned = styled(Grid)`
+export const GridRightAligned = styled(Grid)({
-  && {
+  '&&': {
-    text-align: right;
+    textAlign: 'right',
-  }
+  },
-`;
+});
 
-export const PackageList = styled(List)`
+export const PackageList = styled(List)({
-  && {
+  '&&': {
-    padding: 12px 0 12px 0;
+    padding: '12px 0 12px 0',
 
-    &:hover {
+    '&:hover': {
-      background-color: ${colors.greyLight3};
+      backgroundColor: colors.greyLight3,
-    }
+    },
-  }
+  },
-`;
+});
 
-export const IconButton = styled(MuiIconButton)`
+export const IconButton = styled(MuiIconButton)({
-  && {
+  '&&': {
-    padding: 6px;
+    padding: '6px',
 
-    svg {
+    svg: {
-      font-size: 16px;
+      fontSize: '16px',
-    }
+    },
-  }
+  },
-`;
+});
 
 export const TagContainer = styled('span')`
   && {
@@ -143,20 +143,20 @@ export const TagContainer = styled('span')`
   }
 `;
 
-export const PackageListItem = styled(ListItem)`
+export const PackageListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-top: 0;
+    paddingTop: 0,
-  }
+  },
-`;
+});
 
-export const PackageListItemText = styled(ListItemText)`
+export const PackageListItemText = styled(ListItemText)({
-  && {
+  '&&': {
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});
 
-export const Description = styled(Typography)`
+export const Description = styled(Typography)({
-  color: ${colors.greyDark2};
+  color: colors.greyDark2,
-  font-size: 14px;
+  fontSize: '14px',
-  padding-right: 0;
+  paddingRight: 0,
-`;
+});

src/components/RegistryInfoContent/styles.ts

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

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)`
+export const Title = styled(DialogTitle)({
-  && {
+  '&&': {
-    background-color: ${colors.primary};
+    backgroundColor: colors.primary,
-    color: ${colors.white};
+    color: colors.white,
-    font-size: ${fontSize.lg};
+    fontSize: fontSize.lg,
-  }
+  },
-`;
+});
 
-export const Content = styled(DialogContent)`
+export const Content = styled(DialogContent)({
-  && {
+  '&&': {
-    padding: 0 24px;
+    padding: '0 24px',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-    text-transform: capitalize;
+    textTransform: 'capitalize',
-  }
+  },
-`;
+});
 
-export const GridRepo = styled(Grid)`
+export const GridRepo = styled(Grid)({
-  && {
+  '&&': {
-    align-items: center;
+    alignItems: 'center',
-  }
+  },
-`;
+});
 
-export const GithubLink = styled('a')`
+export const GithubLink = styled('a')({
-  && {
+  '&&': {
-    color: ${colors.primary};
+    color: colors.primary,
-  }
+  },
-`;
+});
 
-export const GithubLogo = styled(Github)`
+export const GithubLogo = styled(Github)({
-  && {
+  '&&': {
-    font-size: 40px;
+    fontSize: '40px',
-    color: ${colors.primary};
+    color: colors.primary,
-    background-color: ${colors.greySuperLight};
+    backgroundColor: colors.greySuperLight,
-  }
+  },
-`;
+});
 
-export const RepositoryListItem = styled(ListItem)`
+export const RepositoryListItem = styled(ListItem)({
-  && {
+  '&&': {
-    padding-left: 0;
+    paddingLeft: 0,
-    padding-right: 0;
+    paddingRight: 0,
-  }
+  },
-`;
+});

src/components/Spinner/styles.ts

@@ -20,8 +20,8 @@ export const Wrapper = styled('div')`
   }
 `;
 
-export const Circular = styled(CircularProgress)`
+export const Circular = styled(CircularProgress)({
-  && {
+  '&&': {
-    color: ${colors.primary};
+    color: colors.primary,
-  }
+  },
-`;
+});

src/components/Tag/styles.ts

@@ -1,13 +1,13 @@
 import styled from 'react-emotion';
 
-export const Wrapper = styled('span')`
+export const Wrapper = styled('span')({
-  && {
+  '&&': {
-    vertical-align: middle;
+    verticalAlign: 'middle',
-    line-height: 22px;
+    lineHeight: '22px',
-    border-radius: 2px;
+    borderRadius: '2px',
-    color: #485a3e;
+    color: '#485a3e',
-    background-color: #f3f4f2;
+    backgroundColor: '#f3f4f2',
-    padding: 0.22rem 0.4rem;
+    padding: '0.22rem 0.4rem',
-    margin: 8px 8px 0 0;
+    margin: '8px 8px 0 0',
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-  }
+  },
-`;
+});
 
-export const Spacer = styled('div')`
+export const Spacer = styled('div')({
-  flex: 1 1 auto;
+  flex: '1 1 auto',
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
-  white-space: nowrap;
+  whiteSpace: 'nowrap',
-  height: 0.5em;
+  height: '0.5em',
-`;
+});
 
-export const ListItemText = styled(MuiListItemText)`
+export const ListItemText = styled(MuiListItemText)({
-  && {
+  '&&': {
-    flex: none;
+    flex: 'none',
-    color: black;
+    color: 'black',
-    opacity: 0.6;
+    opacity: 0.6,
-  }
+  },
-`;
+});

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)`
+export const Heading = styled(Typography)({
-  && {
+  '&&': {
-    font-weight: 700;
+    fontWeight: 700,
-  }
+  },
-`;
+});
 
-export const Spacer = styled('div')`
+export const Spacer = styled('div')({
-  flex: 1 1 auto;
+  flex: '1 1 auto',
-  border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
+  borderBottom: '1px dotted rgba(0, 0, 0, 0.2)',
-  white-space: nowrap;
+  whiteSpace: 'nowrap',
-  height: 0.5em;
+  height: '0.5em',
-`;
+});
 
-export const ListItemText = styled(MuiListItemText)`
+export const ListItemText = styled(MuiListItemText)({
-  && {
+  '&&': {
-    flex: none;
+    flex: 'none',
-    color: black;
+    color: 'black',
-    opacity: 0.6;
+    opacity: 0.6,
-  }
+  },
-`;
+});

src/history.ts

@@ -1,8 +0,0 @@
-import { createBrowserHistory } from 'history';
-import { getBaseNamePath } from './utils/url';
-
-const history = createBrowserHistory({
-  basename: getBaseNamePath(),
-});
-
-export default history;

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

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'));

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]);
+    });
+  });
+});

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.headers && typeof options.headers['Authorization'] === 'undefined') {
-    if (token && options && options.headers) {
+      options.headers = Object.assign({}, options.headers, {
-      headers.set('Authorization', `Bearer ${token}`);
+        ['Authorization']: `Bearer ${token}`,
-      options.headers = Object.assign(options.headers, headers);
+      });
     }
 
     if (!['http://', 'https://', '//'].some(prefix => url.startsWith(prefix))) {
@@ -50,11 +55,11 @@ class API {
       })
         // @ts-ignore
         .then(handleResponseType)
-        .then(([responseOk, body]) => {
+        .then(response => {
-          if (responseOk) {
+          if (response[0]) {
-            resolve(body);
+            resolve(response[1]);
           } else {
-            reject(body);
+            reject(new Error('something went wrong'));
           }
         })
         .catch(error => {

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');
+    });
+  });
+});

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 {
+export function extractFileName(url: string): string {
-  return window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.url_prefix;
+  return url.substring(url.lastIndexOf('/') + 1);
 }
 
-export function getRootPath(): string {
+export function downloadFile(fileStream: Blob, fileName: string): void {
-  return window.__VERDACCIO_BASENAME_UI_OPTIONS && window.__VERDACCIO_BASENAME_UI_OPTIONS.base;
+  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);
 }

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',
     },
   ],

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,