Refactor: Created Reset CSS and added local fonts

package.json

@@ -81,7 +81,6 @@
     "lodash": "^4.17.15",
     "mini-css-extract-plugin": "0.8.0",
     "node-mocks-http": "1.8.0",
-    "normalize.css": "8.0.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "ora": "4.0.2",
     "prettier": "1.18.2",
@@ -105,7 +104,6 @@
     "stylelint-processor-styled-components": "1.8.0",
     "stylelint-webpack-plugin": "1.0.3",
     "supertest": "4.0.2",
-    "typeface-roboto": "0.0.75",
     "typescript": "3.7.1-rc",
     "uglifyjs-webpack-plugin": "2.2.0",
     "url-loader": "2.2.0",
@@ -166,7 +164,7 @@
     "test": "cross-env NODE_ENV=test BABEL_ENV=test TZ=UTC jest --config ./jest/jest.config.js --maxWorkers 2 --passWithNoTests",
     "test:size": "bundlesize",
     "lint": "npm run lint:js && npm run lint:css && npm run lint:lockfile",
-    "lint:js": "npm run type-check && eslint . --ext .js,.ts,.tsx",
+    "lint:js": "npm run type-check && eslint . --ext .js,.ts,.tsx --fix",
     "lint:css": "stylelint \"src/**/styles.ts\"",
     "lint:lockfile": "lockfile-lint --path yarn.lock --type yarn --validate-https --allowed-hosts verdaccio npm yarn",
     "coverage:publish": "codecov",

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>}
-        {this.renderLoginModal()}
-      </Container>
+      <>
+        <StyleBaseline />
+        <Container isLoading={isLoading}>
+          {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,122 @@
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+
+import { fontSize, fontWeight } from '../utils/styles/sizes';
+import { breakpoints } from '../utils/styles/media';
+import colors from '../utils/styles/colors';
+
+import RobotoBoldWoff from './fonts/Roboto-Bold.woff';
+import RobotoBoldWoff2 from './fonts/Roboto-Bold.woff2';
+import RobotoLightWoff from './fonts/Roboto-Light.woff';
+import RobotoLightWoff2 from './fonts/Roboto-Light.woff2';
+import RobotoMediumWoff from './fonts/Roboto-Medium.woff';
+import RobotoMediumWoff2 from './fonts/Roboto-Medium.woff2';
+import RobotoRegularWoff from './fonts/Roboto-Regular.woff';
+import RobotoRegularWoff2 from './fonts/Roboto-Regular.woff2';
+
+// reset styles based on https://gist.github.com/DavidWells/18e73022e723037a50d6
+const resetStyles = makeStyles(() => ({
+  '@global': {
+    '*, *:before, *:after': {
+      boxSizing: 'inherit',
+    },
+    // 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': {
+      margin: '0',
+      padding: '0',
+      border: '0',
+      fontSize: '100%',
+      font: 'inherit',
+      verticalAlign: 'baseline',
+      fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
+    },
+    'article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section': {
+      display: 'block',
+    },
+    'html, body': {
+      height: '100%;',
+    },
+    html: {
+      boxSizing: 'border-box',
+    },
+    '@font-face': [
+      {
+        fontFamily: 'Roboto',
+        fontStyle: 'normal',
+        fontWeight: 300,
+        src: `local('Roboto Light'), local('Roboto-Light'),
+        url(${RobotoLightWoff2}) format('woff2'),
+        url(${RobotoLightWoff}) format('woff')`,
+      },
+      {
+        fontFamily: 'Roboto',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        src: `local('Roboto'), local('Roboto-Regular'),
+        url(${RobotoRegularWoff2}) format('woff2'),
+        url(${RobotoRegularWoff}) format('woff')`,
+      },
+      {
+        fontFamily: 'Roboto',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        src: `local('Roboto Medium'), local('Roboto-Medium'),
+        url(${RobotoMediumWoff2}) format('woff2'),
+        url(${RobotoMediumWoff}) format('woff')`,
+      },
+      {
+        fontFamily: 'Roboto',
+        fontStyle: 'normal',
+        fontWeight: 700,
+        src: `local('Roboto Bold'), local('Roboto-Bold'),
+        url(${RobotoBoldWoff2}) format('woff2'),
+        url(${RobotoBoldWoff}) format('woff')`,
+      },
+    ],
+    body: {
+      lineHeight: 1,
+      fontSize: fontSize.base,
+      color: colors.eclipse,
+    },
+    'ol, ul': {
+      listStyle: 'none',
+    },
+    'blockquote, q': {
+      quotes: 'none',
+      '&:before, &:after': {
+        content: 'none',
+      },
+    },
+    table: {
+      borderCollapse: 'collapse',
+      borderSpacing: 0,
+    },
+    a: {
+      textDecoration: 'none',
+    },
+    strong: {
+      fontWeight: fontWeight.semiBold,
+    },
+    '#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,13 @@
+import CssBaseline from '@material-ui/core/CssBaseline';
+import React from 'react';
+
+import ResetCSS from './ResetStyles';
+
+const StyleBaseline: React.FC = () => (
+  <>
+    <CssBaseline />
+    <ResetCSS />
+  </>
+);
+
+export default StyleBaseline;

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,18 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.woff' {
+  const value: string;
+  export = value;
+}
+declare module '*.woff2' {
+  const value: string;
+  export = value;
+}
+
+declare module '*.png' {
+  const value: string;
+  export = value;
+}

yarn.lock

@@ -9702,11 +9702,6 @@ normalize-url@^3.0.0:
   resolved "https://registry.verdaccio.org/normalize-url/-/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
   integrity sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
 
-[email protected]:
-  version "8.0.1"
-  resolved "https://registry.verdaccio.org/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
-  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
-
 npm-bundled@^1.0.1:
   version "1.0.6"
   resolved "https://registry.verdaccio.org/npm-bundled/-/npm-bundled-1.0.6.tgz#e7ba9aadcef962bb61248f91721cd932b3fe6bdd"
@@ -13406,11 +13401,6 @@ typedarray@^0.0.6:
   resolved "https://registry.verdaccio.org/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-[email protected]:
-  version "0.0.75"
-  resolved "https://registry.verdaccio.org/typeface-roboto/-/typeface-roboto-0.0.75.tgz#98d5ba35ec234bbc7172374c8297277099cc712b"
-  integrity sha512-VrR/IiH00Z1tFP4vDGfwZ1esNqTiDMchBEXYY9kilT6wRGgFoCAlgkEUMHb1E3mB0FsfZhv756IF0+R+SFPfdg==
-
 [email protected]:
   version "3.7.1-rc"
   resolved "https://registry.verdaccio.org/typescript/-/typescript-3.7.1-rc.tgz#2054b872d67f8dc732e36c1df397f9327f37ada0"