Merge branch 'master' into refactor/migrate_autocomplete_to_mui

package.json

@@ -15,26 +15,26 @@
   "devDependencies": {
     "@commitlint/cli": "8.2.0",
     "@commitlint/config-conventional": "8.2.0",
-    "@material-ui/core": "4.6.0",
+    "@material-ui/core": "4.6.1",
     "@material-ui/icons": "4.5.1",
-    "@octokit/rest": "16.34.1",
+    "@octokit/rest": "16.35.0",
-    "@testing-library/react": "9.3.0",
+    "@testing-library/react": "9.3.2",
     "@types/autosuggest-highlight": "3.1.0",
     "@types/enzyme": "3.10.3",
-    "@types/jest": "24.0.20",
+    "@types/jest": "24.0.23",
     "@types/js-base64": "2.3.1",
-    "@types/lodash": "4.14.144",
+    "@types/lodash": "4.14.146",
-    "@types/node": "12.12.6",
+    "@types/node": "12.12.7",
     "@types/react": "16.9.11",
     "@types/react-autosuggest": "9.3.13",
     "@types/react-dom": "16.9.4",
-    "@types/react-router-dom": "5.1.0",
+    "@types/react-router-dom": "5.1.2",
     "@types/request": "2.48.3",
     "@types/validator": "10.11.3",
     "@types/webpack-env": "1.14.1",
-    "@typescript-eslint/parser": "2.5.0",
+    "@typescript-eslint/parser": "2.7.0",
     "@verdaccio/babel-preset": "8.2.0",
-    "@verdaccio/commons-api": "8.2.0",
+    "@verdaccio/commons-api": "8.3.0",
     "@verdaccio/eslint-config": "8.2.0",
     "@verdaccio/types": "8.3.0",
     "autosuggest-highlight": "3.1.1",
@@ -45,8 +45,8 @@
     "concurrently": "5.0.0",
     "cross-env": "6.0.3",
     "css-loader": "3.2.0",
-    "date-fns": "2.6.0",
+    "date-fns": "2.7.0",
-    "detect-secrets": "1.0.4",
+    "detect-secrets": "1.0.5",
     "emotion": "9.2.12",
     "enzyme": "3.10.0",
     "enzyme-adapter-react-16": "1.15.1",
@@ -75,7 +75,7 @@
     "jest-fetch-mock": "2.1.2",
     "js-base64": "2.5.1",
     "js-yaml": "3.13.1",
-    "lint-staged": "8.2.1",
+    "lint-staged": "9.4.2",
     "localstorage-memory": "1.0.3",
     "lockfile-lint": "2.2.0",
     "lodash": "^4.17.15",
@@ -84,17 +84,17 @@
     "normalize.css": "8.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "ora": "4.0.2",
-    "prettier": "1.18.2",
+    "prettier": "1.19.1",
     "prop-types": "15.7.2",
     "puppeteer": "2.0.0",
     "react": "16.11.0",
     "react-autosuggest": "9.4.3",
     "react-dom": "16.11.0",
     "react-emotion": "9.2.12",
-    "react-hot-loader": "4.12.15",
+    "react-hot-loader": "4.12.16",
     "react-router-dom": "5.1.2",
     "request": "2.88.0",
-    "resolve-url-loader": "3.1.0",
+    "resolve-url-loader": "3.1.1",
     "rimraf": "3.0.0",
     "source-map-loader": "0.2.4",
     "standard-version": "7.0.0",
@@ -106,10 +106,10 @@
     "stylelint-webpack-plugin": "1.0.3",
     "supertest": "4.0.2",
     "typeface-roboto": "0.0.75",
-    "typescript": "3.7.1-rc",
+    "typescript": "3.7.2",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "2.2.0",
-    "validator": "11.1.0",
+    "validator": "12.0.0",
     "verdaccio": "4.3.4",
     "verdaccio-auth-memory": "8.3.0",
     "verdaccio-memory": "8.3.0",

src/App/App.tsx

@@ -1,7 +1,5 @@
 import React, { Component, ReactElement } from 'react';
 import isNil from 'lodash/isNil';
-import 'normalize.css';
-import 'typeface-roboto/index.css';
 
 import storage from '../utils/storage';
 import { makeLogin, isTokenExpire } from '../utils/login';
@@ -10,8 +8,8 @@ import LoginModal from '../components/Login';
 import Header from '../components/Header';
 import { Container, Content } from '../components/Layout';
 import API from '../utils/api';
-import '../utils/styles/global';
 import Footer from '../components/Footer';
+import StyleBaseline from '../design-tokens/StyleBaseline';
 
 import AppRoute from './AppRoute';
 import { AppProps, AppContextProvider } from './AppContext';
@@ -46,10 +44,13 @@ export default class App extends Component<{}, AppProps> {
     const context = { isUserLoggedIn, packages, logoUrl, user, scope };
 
     return (
-      <Container isLoading={isLoading}>
+      <>
-        {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
+        <StyleBaseline />
-        {this.renderLoginModal()}
+        <Container isLoading={isLoading}>
-      </Container>
+          {isLoading ? <Loading /> : <AppContextProvider value={context}>{this.renderContent()}</AppContextProvider>}
+          {this.renderLoginModal()}
+        </Container>
+      </>
     );
   }
 

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g ezbsl480\\"><div class=\\"css-hzfs9b ezbsl481\\"><div class=\\"css-d8nsp7 ezbsl482\\"> Made with<span class=\\"css-1so4oe0 ezbsl487\\">♥</span>on<span class=\\"css-1ie354y ezbsl484\\"><svg class=\\"ezbsl485 css-tsfgle ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-13b76ay ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy ezbsl483\\">Powered by<span class=\\"ezbsl488 css-i15wza ek145dl1\\" name=\\"verdaccio\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ek145dl2\\"></span>/ v.1.0.0</div></div></div>"`;
+exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g ezbsl480\\"><div class=\\"css-hzfs9b ezbsl481\\"><div class=\\"css-d8nsp7 ezbsl482\\"> Made with<span class=\\"css-1so4oe0 ezbsl487\\">♥</span>on<span class=\\"css-1ie354y ezbsl484\\"><svg class=\\"ezbsl485 css-151fgib ek145dl0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-8631ip ezbsl486\\"><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"ezbsl488 css-1ah96gu ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-1wbzdyy ezbsl483\\">Powered by<span class=\\"ezbsl488 css-ommwhu ek145dl1\\" name=\\"verdaccio\\" title=\\"Verdaccio\\"><img alt=\\"Verdaccio\\" src=\\"[object Object]\\" class=\\"css-1ncdhax ek145dl2\\"></span>/ v.1.0.0</div></div></div>"`;

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

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Icon /> component should render the component in default state 1`] = `"<svg class=\\"css-snirlv ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg>"`;
+exports[`<Icon /> component should render the component in default state 1`] = `"<svg class=\\"css-j2zgvv ek145dl0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg>"`;

src/components/Icon/styles.ts

@@ -28,9 +28,8 @@ const commonStyle = ({ size = 'sm' as Breakpoint, pointer, modifiers = null }):
 `;
 
 export const Svg = styled('svg')`
-  && {
+  ${commonStyle};
-    ${commonStyle};
+  box-sizing: initial;
-  }
 `;
 
 export const ImgWrapper: StyledOtherComponent<
@@ -43,9 +42,8 @@ export const ImgWrapper: StyledOtherComponent<
   DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>,
   {}
 > = styled('span')`
-  && {
+  ${commonStyle};
-    ${commonStyle};
+  box-sizing: initial;
-  }
 `;
 
 export const Img = styled('img')({

src/design-tokens/ResetStyles.tsx

@@ -0,0 +1,38 @@
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+
+import { fontWeight } from '../utils/styles/sizes';
+import { breakpoints } from '../utils/styles/media';
+
+const resetStyles = makeStyles(() => ({
+  '@global': {
+    // eslint-disable-next-line max-len
+    'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
+      fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
+    },
+    strong: {
+      fontWeight: fontWeight.semiBold,
+    },
+    'html, body, #root': {
+      height: '100%',
+    },
+    '.container': {
+      padding: 15,
+      flex: 1,
+
+      [`@media screen and (min-width: ${breakpoints.container}px)`]: {
+        maxWidth: breakpoints.container,
+        width: '100%',
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      },
+    },
+  },
+}));
+
+const ResetStyles: React.FC = ({ children }) => {
+  resetStyles();
+  return <>{children}</>;
+};
+
+export default ResetStyles;

src/design-tokens/StyleBaseline.tsx

@@ -0,0 +1,15 @@
+import CssBaseline from '@material-ui/core/CssBaseline';
+import React from 'react';
+import 'normalize.css';
+import 'typeface-roboto/index.css';
+
+import ResetCSS from './ResetStyles';
+
+const StyleBaseline: React.FC = () => (
+  <>
+    <CssBaseline />
+    <ResetCSS />
+  </>
+);
+
+export default StyleBaseline;

src/utils/styles/global.ts

@@ -1,80 +0,0 @@
-import { injectGlobal } from 'emotion';
-
-import { fontSize, fontWeight } from './sizes';
-import colors from './colors';
-import { breakpoints } from './media';
-
-const fontFamily = `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", 
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`;
-
-export default injectGlobal`
-    html,
-    body {
-        height: 100%;
-    }
-
-    body {
-        font-family: ${fontFamily};
-        font-size: ${fontSize.base};
-        color: ${colors.eclipse};
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-    }
-
-    strong {
-        font-weight: ${fontWeight.semiBold};
-    }
-
-    .container {
-        padding: 15px;
-        flex: 1;
-
-        @media screen and (min-width: ${breakpoints.container}px) {
-          max-width: ${breakpoints.container}px;
-          width: 100%;
-          margin-left: auto;
-          margin-right: auto;
-        };
-    
-        .el-loading-spinner {
-            margin-top: 0 !important;
-        }
-    }
-    
-    .content {
-        display: flex;
-    }
-    
-    .page-full-height {
-        display: flex;
-        flex-direction: column;
-        min-height: 100vh;
-        overflow: hidden;
-    }
-    
-    .el-button {
-        &:hover, &:focus {
-            color: ${colors.primary};
-            border-color: ${colors.primary};
-        }
-    }
-    
-    .el-input__inner {
-        &:hover, &:focus {
-            border-color: ${colors.primary};
-        }
-    }
-    
-    .el-dialog__headerbtn:hover .el-dialog__close {
-        color: ${colors.eclipse};
-    }
-    
-    .package-list-items {
-        width: 100%;
-    }
-  
-`;

tools/webpack.config.js

@@ -67,7 +67,8 @@ module.exports = {
         test: /\.(woff|woff2|eot|ttf|otf)$/,
         loader: 'url-loader',
         options: {
-          name: '/fonts/[name].[ext]',
+          name: '[name].[ext]',
+          outputPath: 'fonts',
           limit: 50,
         },
       },

types/custom.d.ts

@@ -1,11 +1,3 @@
-// https://stackoverflow.com/questions/44717164/unable-to-import-svg-files-in-typescript
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.png';
-
 declare module 'localstorage-memory' {
   const memoryStorage: Storage;
   export default memoryStorage;

types/files.d.ts

@@ -0,0 +1,9 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const value: string;
+  export = value;
+}