move app over to webpack, streamline build process and configuration

babel.config.json

@@ -1,9 +0,0 @@
-{
-	"presets": [
-		"@babel/preset-env",
-		"@babel/preset-react",
-		"@babel/preset-typescript",
-		"@emotion/babel-preset-css-prop"
-	],
-	"babelrcRoots": ["*", "packages/*"]
-}

package.json

@@ -7,7 +7,7 @@
 	"scripts": {
 		"start": "concurrently \"yarn dev\" \"yarn storybook\"",
 		"build": "lerna run build",
-		"dev": "lerna run --parallel dev",
+		"dev": "lerna run --scope atlas-app --stream dev",
 		"storybook": "lerna run --scope atlas-app --stream storybook",
 		"lint": "yarn run eslint . --ext .js,.jsx,.ts,.tsx",
 		"clean": "lerna clean && rm -rf node_modules",
@@ -19,44 +19,28 @@
 		]
 	},
 	"devDependencies": {
-		"@babel/core": "^7.8.7",
-		"@babel/plugin-transform-runtime": "^7.10.1",
-		"@babel/preset-env": "^7.8.7",
-		"@babel/preset-react": "^7.8.3",
-		"@babel/preset-typescript": "^7.9.0",
-		"@emotion/babel-preset-css-prop": "^10.0.27",
 		"@fortawesome/fontawesome-svg-core": "^1.2.28",
 		"@fortawesome/free-solid-svg-icons": "^5.13.0",
 		"@fortawesome/react-fontawesome": "^0.1.9",
-		"@storybook/addon-actions": "^5.3.17",
-		"@storybook/addon-docs": "^5.3.17",
-		"@storybook/addon-knobs": "^5.3.17",
-		"@storybook/addon-links": "^5.3.17",
-		"@storybook/addon-storysource": "^5.3.17",
-		"@storybook/addons": "^5.3.19",
-		"@storybook/react": "^5.3.17",
-		"@storybook/theming": "^5.3.19",
-		"@svgr/webpack": "^5.4.0",
+		"@types/jest": "^24.0.0",
+		"@types/node": "^12.0.0",
 		"@typescript-eslint/eslint-plugin": "^3.5.0",
 		"@typescript-eslint/parser": "^3.2.0",
-		"babel-loader": "^8.0.6",
 		"concurrently": "^5.2.0",
 		"csstype": "^2.6.10",
 		"enzyme": "^3.11.0",
 		"enzyme-adapter-react-16": "^1.15.2",
-		"eslint": "^7.2.0",
+		"eslint": "^6.6.0",
 		"eslint-config-prettier": "^6.11.0",
 		"eslint-plugin-jsx-a11y": "^6.2.3",
 		"eslint-plugin-prettier": "^3.1.3",
 		"eslint-plugin-react": "^7.20.3",
 		"eslint-plugin-react-hooks": "^4.0.4",
 		"husky": "^4.2.5",
-		"jest": "^26.0.1",
+		"jest": "24.9.0",
 		"lerna": "^3.20.2",
 		"lint-staged": "^10.2.7",
 		"prettier": "^2.0.5",
-		"react-docgen-typescript-loader": "^3.7.1",
-		"storybook-addon-jsx": "^7.1.15",
 		"ts-loader": "^6.2.1",
 		"typescript": "^3.8.3"
 	}

packages/app/.parcelrc

@@ -1,6 +0,0 @@
-{
-  "extends": "@parcel/config-default",
-  "transformers": {
-    "*.svg": ["@parcel/transformer-svgo", "@parcel/transformer-svg-react"]
-  }
-}

packages/app/config-overrides.js

@@ -0,0 +1,46 @@
+const path = require('path')
+const { override, addBabelPreset, addWebpackAlias, disableEsLint } = require('customize-cra')
+const eslintConfig = require('../../.eslintrc.js')
+
+// based on https://github.com/arackaf/customize-cra/issues/175#issuecomment-610023655
+const useEslintConfig = (configRules) => (config) => {
+	const updatedRules = config.module.rules.map((rule) => {
+		// Only target rules that have defined a `useEslintrc` parameter in their options
+		if (rule.use && rule.use.some((use) => use.options && use.options.useEslintrc !== void 0)) {
+			const ruleUse = rule.use[0]
+			const baseOptions = ruleUse.options
+			const baseConfig = baseOptions.baseConfig || {}
+			const newOptions = {
+				useEslintrc: false,
+				ignore: true,
+				baseConfig: { ...baseConfig, ...configRules },
+			}
+			ruleUse.options = newOptions
+			return rule
+
+			// Rule not using eslint. Do not modify.
+		} else {
+			return rule
+		}
+	})
+
+	config.module.rules = updatedRules
+	return config
+}
+
+module.exports = {
+	webpack: override(
+		addBabelPreset('@emotion/babel-preset-css-prop'),
+		addWebpackAlias({
+			['@']: path.resolve(__dirname, 'src/'),
+		}),
+
+		// once project is cleaned up we can remove disable and enable the config again
+		// useEslintConfig(eslintConfig),
+		disableEsLint()
+	),
+	paths: (paths) => {
+		paths.appBuild = path.resolve(__dirname, '..', '..', 'dist')
+		return paths
+	},
+}

packages/app/package.json

@@ -2,9 +2,7 @@
 	"name": "atlas-app",
 	"version": "1.0.0",
 	"description": "A user governed video platform",
-	"homepage": "https://github.com/Joystream/joystream/tree/init_atlas/atlas",
 	"license": "ISC",
-	"main": "../../dist/app.html",
 	"directories": {
 		"src": "src",
 		"test": "__tests__"
@@ -16,44 +14,62 @@
 		"type": "git",
 		"url": "https://github.com/Joystream/joystream.git"
 	},
+	"bugs": {
+		"url": "https://github.com/Joystream/joystream/issues"
+	},
 	"scripts": {
-		"start": "parcel public/index.html",
-		"build": "parcel build public/index.html",
-		"dev": "parcel public/index.html",
+		"start": "react-app-rewired start",
+		"dev": "react-app-rewired start",
+		"build": "react-app-rewired build",
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"eject": "react-app-rewired eject",
 		"storybook": "start-storybook -p 6006 --quiet -c src/shared/.storybook",
 		"build-storybook": "build-storybook -c src/shared/.storybook",
-		"test": "echo \"Error: run tests from root\" && exit 1",
 		"chromatic": "chromatic --project-token=qq8aetz26u"
 	},
-	"bugs": {
-		"url": "https://github.com/Joystream/joystream/issues"
-	},
 	"dependencies": {
+		"@emotion/babel-preset-css-prop": "^10.0.27",
 		"@emotion/core": "^10.0.28",
-		"@parcel/transformer-svg-react": "2.0.0-beta.1",
-		"@parcel/transformer-svgo": "2.0.0-beta.1",
 		"@reach/router": "^1.3.3",
+		"@storybook/addon-actions": "^5.3.17",
+		"@storybook/addon-docs": "^5.3.17",
+		"@storybook/addon-knobs": "^5.3.17",
+		"@storybook/addon-links": "^5.3.17",
+		"@storybook/addon-storysource": "^5.3.17",
+		"@storybook/addons": "^5.3.19",
+		"@storybook/preset-create-react-app": "^3.1.4",
+		"@storybook/react": "^5.3.17",
+		"@storybook/theming": "^5.3.19",
 		"@types/reach__router": "^1.3.5",
-		"@types/react": "^16.9.36",
-		"@types/react-dom": "^16.9.8",
+		"@types/react": "^16.9.0",
+		"@types/react-dom": "^16.9.0",
 		"@types/react-redux": "^7.1.9",
 		"@types/redux": "^3.6.0",
 		"chromatic": "^4.0.3",
+		"customize-cra": "^1.0.0",
 		"emotion-normalize": "^10.1.0",
-		"parcel": "2.0.0-beta.1",
 		"react": "^16.13.1",
+		"react-app-rewired": "^2.1.6",
+		"react-docgen-typescript-loader": "^3.7.1",
 		"react-dom": "^16.13.1",
 		"react-player": "^2.2.0",
 		"react-redux": "^7.2.0",
+		"react-scripts": "3.4.1",
 		"react-spring": "^8.0.27",
 		"redux": "^4.0.5",
+		"storybook-addon-jsx": "^7.1.15",
 		"use-resize-observer": "^6.1.0"
 	},
-	"alias": {
-		"components": "./src/components",
-		"shared": "./src/shared",
-		"store": "./src/store",
-		"theme": "./src/theme",
-		"views": "./src/views"
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
 	}
 }

packages/app/public/index.html

@@ -1,9 +1,9 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<link rel="stylesheet" href="styles.css" />
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<meta name="description" content="Joystream Atlas" />
 		<link
 			rel="stylesheet"
 			href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css"
@@ -14,9 +14,8 @@
 		/>
 		<title>Atlas</title>
 	</head>
-
 	<body>
-		<div id="root">not rendered</div>
-		<script src="../src/index.tsx"></script>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
 	</body>
 </html>

packages/app/public/styles.css

@@ -1,16 +0,0 @@
-@font-face {
-	font-family: Inter;
-	font-weight: 300;
-	src: url("../assets/fonts/Inter-ExtraLight-BETA.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: Inter;
-	src: url("../assets/fonts/Inter-Regular.ttf") format("truetype");
-}
-
-@font-face {
-	font-family: Inter;
-	font-weight: bold;
-	src: url("../assets/fonts/Inter-Bold.ttf") format("truetype");
-}

packages/app/src/App.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { Provider } from "react-redux";
-import { Router } from "@reach/router";
+import React from 'react'
+import { Provider } from 'react-redux'
+import { Router } from '@reach/router'
 
-import store from "store";
-import { Layout } from "components";
-import { HomeView } from "views";
+import store from './store'
+import { Layout } from './components'
+import { HomeView } from './views'
 
 export default function App() {
 	return (
@@ -15,5 +15,5 @@ export default function App() {
 				</Router>
 			</Layout>
 		</Provider>
-	);
+	)
 }

packages/app/src/components/ChannelGallery.tsx

@@ -1,52 +1,52 @@
-import React from "react";
-import { css } from "@emotion/core";
-import { ChannelPreview, Gallery } from "shared/components";
+import React from 'react'
+import { css } from '@emotion/core'
+import { ChannelPreview, Gallery } from '@/shared/components'
 
 const channels = [
 	{
-		channel: "Channel Name",
-		views: "334k",
+		channel: 'Channel Name',
+		views: '334k',
 		channelAvatar:
-			"https://s3-alpha-sig.figma.com/img/6751/0287/aac9acd027772e345affcf7aa6b55558?Expires=1594598400&Signature=fvbTsTzpk~ZCOnkgIH0ir-Mogd0Z4YI7J1sviV2sEnDn3SvlYEV~iW2sJs65a73cbaKTam3ZE4er~nXogGBQvEfqcQwm7Gv4riTgVKqopFOflM5CZ1xgPb1s6OmlSDXNsqR8Wl6oP~DRt7Dl-fWjmpPj-uk01GCWGKX4QR2zwezPg1zSZxB~xpaxCKnzi8tbTnGfTpDFJCFDQdSu-P3OVR~B~M8v6p-ZODsDHe9OtRwB2YyAi21ac-PFEWPM4Pm0oGVcAkRTV~-MK70bhtF9mSwNaCXS3BhU3~RhlihoJnuVU5aCtoxQ5DkgCSFc9~QE~lDCRRAFIaO-XApXDt97TA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/6751/0287/aac9acd027772e345affcf7aa6b55558?Expires=1594598400&Signature=fvbTsTzpk~ZCOnkgIH0ir-Mogd0Z4YI7J1sviV2sEnDn3SvlYEV~iW2sJs65a73cbaKTam3ZE4er~nXogGBQvEfqcQwm7Gv4riTgVKqopFOflM5CZ1xgPb1s6OmlSDXNsqR8Wl6oP~DRt7Dl-fWjmpPj-uk01GCWGKX4QR2zwezPg1zSZxB~xpaxCKnzi8tbTnGfTpDFJCFDQdSu-P3OVR~B~M8v6p-ZODsDHe9OtRwB2YyAi21ac-PFEWPM4Pm0oGVcAkRTV~-MK70bhtF9mSwNaCXS3BhU3~RhlihoJnuVU5aCtoxQ5DkgCSFc9~QE~lDCRRAFIaO-XApXDt97TA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		channel: "Channel Name",
-		views: "334k",
+		channel: 'Channel Name',
+		views: '334k',
 		channelAvatar:
-			"https://s3-alpha-sig.figma.com/img/f853/b9f7/e07227eb3c4e6312d43372578cdea8f1?Expires=1594598400&Signature=AhF3IwhCDhR3aZBnCOVcN2Vj-fTAabElsuAsVT2sAc0Txu3aQz0XiYxEqOrUHhxzGkVr0oXNlcC9WTWlPQfE~rOd~D~E0wTTd5SVMoWtPmX5Uuy4ohRfUdBx0FifTzEN~e5H0cuXOyYd01TmMWWkreVYMxJ0mRVPjqS9sYbCSvaxyQY5v8fpa69ATGkrBx4W96HcPGJeTJZEJEawJbVIHbAXgrJKlCCkD3oRjur00Nw~v~WKDyPW1nb0BSSUe7NeRaV4qIztPyAorQVBO4iFaVDeS~IeTRPG4T4trZoRJtpF9jTfBDd~0dFWbvJ2CeavaClhC5bY8fYlIcfRjddTyA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/f853/b9f7/e07227eb3c4e6312d43372578cdea8f1?Expires=1594598400&Signature=AhF3IwhCDhR3aZBnCOVcN2Vj-fTAabElsuAsVT2sAc0Txu3aQz0XiYxEqOrUHhxzGkVr0oXNlcC9WTWlPQfE~rOd~D~E0wTTd5SVMoWtPmX5Uuy4ohRfUdBx0FifTzEN~e5H0cuXOyYd01TmMWWkreVYMxJ0mRVPjqS9sYbCSvaxyQY5v8fpa69ATGkrBx4W96HcPGJeTJZEJEawJbVIHbAXgrJKlCCkD3oRjur00Nw~v~WKDyPW1nb0BSSUe7NeRaV4qIztPyAorQVBO4iFaVDeS~IeTRPG4T4trZoRJtpF9jTfBDd~0dFWbvJ2CeavaClhC5bY8fYlIcfRjddTyA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		channel: "Channel Name",
-		views: "334k",
+		channel: 'Channel Name',
+		views: '334k',
 		channelAvatar:
-			"https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1594598400&Signature=SZwkYLVqsT9d2UPzQKA0whK2o4590Lf15eipFvdpJNf~JtrNWSXJKfgpcDp-APKSaPy8-ycv-cDyOMtog7zTB5Ygh8Rag0pEumJQgXSPBw6e~DmE1lPlLED-cmzrEOnCYVaa6m6zjln57K6jP0yusSwZTNly3moD-9iIRrR4fP9ZNBVHVpW~TSeyd7hL4r26s4NNVNkWrFw8~vrz-byARTPo5vyTqvPkaX1QL~uNjfU5x~--BAGb6meuPBMNeolFbUWj2HsV908N0xZdcMLfZ92-Ze1IVq4wc~fuIitcDZ7z6LQSVf5QuMef4X9QYR7BDvXT8iq-NeOGYyPsGpZ3Jg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1594598400&Signature=SZwkYLVqsT9d2UPzQKA0whK2o4590Lf15eipFvdpJNf~JtrNWSXJKfgpcDp-APKSaPy8-ycv-cDyOMtog7zTB5Ygh8Rag0pEumJQgXSPBw6e~DmE1lPlLED-cmzrEOnCYVaa6m6zjln57K6jP0yusSwZTNly3moD-9iIRrR4fP9ZNBVHVpW~TSeyd7hL4r26s4NNVNkWrFw8~vrz-byARTPo5vyTqvPkaX1QL~uNjfU5x~--BAGb6meuPBMNeolFbUWj2HsV908N0xZdcMLfZ92-Ze1IVq4wc~fuIitcDZ7z6LQSVf5QuMef4X9QYR7BDvXT8iq-NeOGYyPsGpZ3Jg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		channel: "Channel Name",
-		views: "334k",
+		channel: 'Channel Name',
+		views: '334k',
 		channelAvatar:
-			"https://s3-alpha-sig.figma.com/img/3408/13d0/9b77ae604c2991a867734c9bc7511bdb?Expires=1594598400&Signature=WfF06NNeSSMn5O~NKhufgbJubM-9CqIyPCwwP4nGY0hxPGbQ4aoauZSdNG8XZtxuFtcdxvcapt4Y~mqgbDNIJsj7pRnWueEptTGSJEto99SNxNjgZpfz7BM-T-48D3PfsYWwKnthOssm8eLTIVbDODM4VRfTRS~G94olA9g8VxAf9YLW6aorO01nrtoNS~3~O~sGVVnC2OZeCcEba0eQWPdVM94nvk1HDRe08WtXLGoi3E3gAr5wo4E48LtskEO0ycguLlzPGeSS-1Z7XqiGnhQ1y90yAk4OLWJh1HYsgNromK-OSBLU0Dpm3CYWzjYn29OiLC9N9ypudQDjnatkUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/3408/13d0/9b77ae604c2991a867734c9bc7511bdb?Expires=1594598400&Signature=WfF06NNeSSMn5O~NKhufgbJubM-9CqIyPCwwP4nGY0hxPGbQ4aoauZSdNG8XZtxuFtcdxvcapt4Y~mqgbDNIJsj7pRnWueEptTGSJEto99SNxNjgZpfz7BM-T-48D3PfsYWwKnthOssm8eLTIVbDODM4VRfTRS~G94olA9g8VxAf9YLW6aorO01nrtoNS~3~O~sGVVnC2OZeCcEba0eQWPdVM94nvk1HDRe08WtXLGoi3E3gAr5wo4E48LtskEO0ycguLlzPGeSS-1Z7XqiGnhQ1y90yAk4OLWJh1HYsgNromK-OSBLU0Dpm3CYWzjYn29OiLC9N9ypudQDjnatkUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		channel: "Channel Name",
-		views: "334k",
+		channel: 'Channel Name',
+		views: '334k',
 		channelAvatar:
-			"https://s3-alpha-sig.figma.com/img/dff3/9515/5c27afa40752cfa517b4d1a67b52819d?Expires=1594598400&Signature=VuAo23WQ1xnIPVqpCohfQbjXhOrKo9JZmuBd~EpyHf83PhzrIUrkEQke8QOGiKJuGQ-yw-MVa1ec3Xv-35x9Lh1QSkRIc6oQlSxbuZ3Enxg106xflm9ykurtYTF7DXg8LCLqRcl1sMNPFtkoPLz92uHmaDBqr6DU7f6mFY1VxG85bT1nWHX4TEtC~Nc6qr07Rd1PjFCodt7QcDpkQSjjbcSijjDtAcnzeGWaO9mWJCvxapsxUC43j4i7fDA8GyMXl2bnfTQrSXGcEXvapwIblxU3goqWbjrjGoN72C2shxaqLp-Xmhc7r-p4wTvDVfgk9XHZ7ytci~hkPQA2qvZAew__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/dff3/9515/5c27afa40752cfa517b4d1a67b52819d?Expires=1594598400&Signature=VuAo23WQ1xnIPVqpCohfQbjXhOrKo9JZmuBd~EpyHf83PhzrIUrkEQke8QOGiKJuGQ-yw-MVa1ec3Xv-35x9Lh1QSkRIc6oQlSxbuZ3Enxg106xflm9ykurtYTF7DXg8LCLqRcl1sMNPFtkoPLz92uHmaDBqr6DU7f6mFY1VxG85bT1nWHX4TEtC~Nc6qr07Rd1PjFCodt7QcDpkQSjjbcSijjDtAcnzeGWaO9mWJCvxapsxUC43j4i7fDA8GyMXl2bnfTQrSXGcEXvapwIblxU3goqWbjrjGoN72C2shxaqLp-Xmhc7r-p4wTvDVfgk9XHZ7ytci~hkPQA2qvZAew__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		channel: "Channel Name",
-		views: "334k",
+		channel: 'Channel Name',
+		views: '334k',
 		channelAvatar:
-			"https://s3-alpha-sig.figma.com/img/f964/ea3d/0c500a4a50470a935ff6bee32ee0731a?Expires=1594598400&Signature=dBOZ0VVyfgxZ~VzH6jpeF4vCWROEGxr6QtOyM8X5kCtvvhvJfd2KRxO8iyVea9ZDIYo7VnDh4IngE3yW040dRFdQuVEKkqZC8aLE8pzXkgqdNlzANAVSnrHYW~Y-3xtLBA3I9dr5EPNasH37ZjFyCYvXjgjXvOpL9-Ji5aHtkDOUN-KCbh6ETJSoQOt~uytRcXoYscnKHPUykRpZVvsPtLUojOqJfCfS0u5sGyqLEEPKgSHt3Q00vHSe5fr~GAy3JbzZ6lEETbFu0iS05RxKDC44ojql0ZP1RkX5BvIxXQ6CEjF2GaRXzV81k7QUAPbs3ZR2Ess2Lmd1NHlqt2rcbg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/f964/ea3d/0c500a4a50470a935ff6bee32ee0731a?Expires=1594598400&Signature=dBOZ0VVyfgxZ~VzH6jpeF4vCWROEGxr6QtOyM8X5kCtvvhvJfd2KRxO8iyVea9ZDIYo7VnDh4IngE3yW040dRFdQuVEKkqZC8aLE8pzXkgqdNlzANAVSnrHYW~Y-3xtLBA3I9dr5EPNasH37ZjFyCYvXjgjXvOpL9-Ji5aHtkDOUN-KCbh6ETJSoQOt~uytRcXoYscnKHPUykRpZVvsPtLUojOqJfCfS0u5sGyqLEEPKgSHt3Q00vHSe5fr~GAy3JbzZ6lEETbFu0iS05RxKDC44ojql0ZP1RkX5BvIxXQ6CEjF2GaRXzV81k7QUAPbs3ZR2Ess2Lmd1NHlqt2rcbg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
-];
+]
 
-channels.push(...channels);
+channels.push(...channels)
 
 type ChannelGalleryProps = {
-	title: string;
-	action: string;
-};
+	title: string
+	action: string
+}
 
 const ChannelGallery: React.FC<Partial<ChannelGalleryProps>> = ({ title, action }) => (
 	<Gallery title={title} action={action}>
@@ -62,6 +62,6 @@ const ChannelGallery: React.FC<Partial<ChannelGalleryProps>> = ({ title, action
 			/>
 		))}
 	</Gallery>
-);
+)
 
-export default ChannelGallery;
+export default ChannelGallery

packages/app/src/components/Hero.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { css } from "@emotion/core";
-import { Button, Header } from "shared/components";
+import React from 'react'
+import { css } from '@emotion/core'
+import { Button, Header } from '@/shared/components'
 
 type HeroProps = {
-	backgroundImg: string;
-};
+	backgroundImg: string
+}
 
 const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 	return (
@@ -47,6 +47,6 @@ const Hero: React.FC<Partial<HeroProps>> = ({ backgroundImg }) => {
 				</Button>
 			</div>
 		</Header>
-	);
-};
-export default Hero;
+	)
+}
+export default Hero

packages/app/src/components/Layout.tsx

@@ -1,11 +1,11 @@
-import React from "react";
-import { GlobalStyle } from "shared/components";
+import React from 'react'
+import { GlobalStyle } from '@/shared/components'
 
 const Layout: React.FC = ({ children }) => (
 	<main>
 		<GlobalStyle />
 		{children}
 	</main>
-);
+)
 
-export default Layout;
+export default Layout

packages/app/src/components/SeriesGallery.tsx

@@ -1,62 +1,62 @@
-import React from "react";
-import { css } from "@emotion/core";
-import { Gallery, SeriesPreview } from "shared/components";
+import React from 'react'
+import { css } from '@emotion/core'
+import { Gallery, SeriesPreview } from '@/shared/components'
 
 type SeriesGalleryProps = {
-	title: string;
-	action: string;
-};
+	title: string
+	action: string
+}
 
 const series = [
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/1885/2678/5bd8a45ed7ef3717d7da8d86f63f42a6?Expires=1593993600&Signature=Ko2u0OOvVm-pboQJF24EQJa23GbfFyh5gRu9XI755iow8yBljl94NddLWKTx2jM49V9L3PFGwDIEhgo3fcymz0ITX6K0HPNyPS6DbGdn7qsjvSMnqhjpkGGas2LTCLPnhmC65fUaBPQpPhSV77ptlFnjyx9j4cy3rabp0cNh9e6~en7yMlIlBmaYKLYByVcTXKxNdJI1M~QhactVw8KDwYnXRVOFoJBuxhA1R4FQB1BHrACrViOjXh9puWDqNOkDYRDI9JKjHZelEpPpl1eU3oudsuN9IuANSNiASWfcXPd7mFDUozF0VpOBQTWrKdUMfAfOZ83gc4NeKGo9l83JFQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/1885/2678/5bd8a45ed7ef3717d7da8d86f63f42a6?Expires=1593993600&Signature=Ko2u0OOvVm-pboQJF24EQJa23GbfFyh5gRu9XI755iow8yBljl94NddLWKTx2jM49V9L3PFGwDIEhgo3fcymz0ITX6K0HPNyPS6DbGdn7qsjvSMnqhjpkGGas2LTCLPnhmC65fUaBPQpPhSV77ptlFnjyx9j4cy3rabp0cNh9e6~en7yMlIlBmaYKLYByVcTXKxNdJI1M~QhactVw8KDwYnXRVOFoJBuxhA1R4FQB1BHrACrViOjXh9puWDqNOkDYRDI9JKjHZelEpPpl1eU3oudsuN9IuANSNiASWfcXPd7mFDUozF0VpOBQTWrKdUMfAfOZ83gc4NeKGo9l83JFQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1593993600&Signature=DhHoAZoGtrtjfr7dtFCf6zj6YlthtbQavorx1Le7Y8Il0NZquPCjY0VFjVHZUjecukXhUiWkr~X9QM3xgxOCkjGV1GApl5Fo7Bv8DLeOz5XmCMvF4wvpfTyNQ8WUPlePmFzqyIzuYcn~4-H2Uh3QNDi7hCY3mGsChrslIR8LzuukDuQ~~Jyx~PWJf96eqxq74SUVPVVIUPXmwFIFjkpq3TSWCWWkN9MvoUiXwxsGqQHhb1W7-m52ofNZcedkHA2DAvLmF46erA9Bzb3JT2ClY86UIGdn2eokfLxCmEVx8KhTtWozfDaJEJ~lkK8cJIdTH9~3ipUZtoWIwL~JHFsV5Q__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1593993600&Signature=DhHoAZoGtrtjfr7dtFCf6zj6YlthtbQavorx1Le7Y8Il0NZquPCjY0VFjVHZUjecukXhUiWkr~X9QM3xgxOCkjGV1GApl5Fo7Bv8DLeOz5XmCMvF4wvpfTyNQ8WUPlePmFzqyIzuYcn~4-H2Uh3QNDi7hCY3mGsChrslIR8LzuukDuQ~~Jyx~PWJf96eqxq74SUVPVVIUPXmwFIFjkpq3TSWCWWkN9MvoUiXwxsGqQHhb1W7-m52ofNZcedkHA2DAvLmF46erA9Bzb3JT2ClY86UIGdn2eokfLxCmEVx8KhTtWozfDaJEJ~lkK8cJIdTH9~3ipUZtoWIwL~JHFsV5Q__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		series: "Series Name",
-		channel: "Channel Name",
+		series: 'Series Name',
+		channel: 'Channel Name',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd1c/f08d/2e5296745a67f795f74c976182d7eb54?Expires=1592784000&Signature=McYeMoviUMseqXMvYRsgDji2wDzxgZ1~uEBWcO0fOkanY7jrk1~x7ekbZU1STsLJFAA3qM2YXF9VhOcC8QheqOB65GLOO3B9qJlHcCtLiZ3rQjbO-N7qCfWzVq0g5j4LIr-Rg4Iy6I9ma-zUK1AueehDonk9MC6DsCNcrbTy6Tr~3R5IrFWe7uRdnzowIOyjk1vvhX2yUcA~O0jhpMjKPoqL-MSljF15nnNRvk~lFRKPjxSrAqGKW0wxzbHnVURw7CLZadbloLd6B9dbHY~KwD-6KSuRtp9tPdKx9Bs~yNkeP-3ObYLRtiCr7CjD3-DTIFOD6ez4WDZuhDPu69HE2w__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
-];
+]
 
 const SeriesGallery: React.FC<Partial<SeriesGalleryProps>> = ({ title, action }) => (
 	<Gallery title={title} action={action}>
@@ -72,6 +72,6 @@ const SeriesGallery: React.FC<Partial<SeriesGalleryProps>> = ({ title, action })
 			/>
 		))}
 	</Gallery>
-);
+)
 
-export default SeriesGallery;
+export default SeriesGallery

packages/app/src/components/TagsGallery.tsx

@@ -1,29 +1,29 @@
-import React from "react";
-import { Gallery, TagButton } from "shared/components";
+import React from 'react'
+import { Gallery, TagButton } from '@/shared/components'
 
 const tags = [
-	"finance",
-	"Sport",
-	"Health & Fitness",
-	"lifestyle",
-	"finance",
-	"Sport",
-	"Health & Fitness",
-	"lifestyle",
-	"finance",
-	"Sport",
-	"Health & Fitness",
-	"lifestyle",
-	"finance",
-	"Sport",
-	"Health & Fitness",
-	"lifestyle",
-];
+	'finance',
+	'Sport',
+	'Health & Fitness',
+	'lifestyle',
+	'finance',
+	'Sport',
+	'Health & Fitness',
+	'lifestyle',
+	'finance',
+	'Sport',
+	'Health & Fitness',
+	'lifestyle',
+	'finance',
+	'Sport',
+	'Health & Fitness',
+	'lifestyle',
+]
 
 type TagsProps = {
-	title: string;
-	action: string;
-};
+	title: string
+	action: string
+}
 
 const TagsGallery: React.FC<Partial<TagsProps>> = ({ title, action }) => (
 	<Gallery title={title} action={action}>
@@ -31,6 +31,6 @@ const TagsGallery: React.FC<Partial<TagsProps>> = ({ title, action }) => (
 			<TagButton key={tag}>{tag}</TagButton>
 		))}
 	</Gallery>
-);
+)
 
-export default TagsGallery;
+export default TagsGallery

packages/app/src/components/VideoGallery.tsx

@@ -1,114 +1,114 @@
-import React, { useCallback, useState } from "react";
-import { css, SerializedStyles } from "@emotion/core";
+import React, { useCallback, useState } from 'react'
+import { css, SerializedStyles } from '@emotion/core'
 
-import { Gallery, VideoPreview } from "shared/components";
+import { Gallery, VideoPreview } from '@/shared/components'
 
 type VideoGalleryProps = {
-	title: string;
-	action: string;
-};
+	title: string
+	action: string
+}
 
 const videoPlaceholders = [
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1593993600&Signature=Q34ageNdR3Y48K5lG8HW1KOgMGCi94qmWOK5yO~cK6XzgyO2nCJB6Pjoaa~gQX7zMVSHIkxlVt-9CHz~H9iXmA7r0LfTm90sNlTZ8ZspvU9TWgCGdPMj1A-SzTIAmeiDrZ0DrSzILQdJOMwaP-DeYKpFN6zvG6h56XHznX5lEiawRqeObL0g4SAHNG5tiO0Rdjwtckeuz~diwLVBOUqPaeDGOABlpUJQFoy~Dx7FxK65MyPXUZ7CtUVqjKkyl-jfnl0DwIpOiI9K2HJjtV7FlPbc28C4JeniafBr0nUkoWAjzcyyOr37v0xNw2EBy91mBc33kDUlwbqom9f-leRPZQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/57d7/47bd/e40e51d45107656c92b3c9d982e76c6e?Expires=1593993600&Signature=Q34ageNdR3Y48K5lG8HW1KOgMGCi94qmWOK5yO~cK6XzgyO2nCJB6Pjoaa~gQX7zMVSHIkxlVt-9CHz~H9iXmA7r0LfTm90sNlTZ8ZspvU9TWgCGdPMj1A-SzTIAmeiDrZ0DrSzILQdJOMwaP-DeYKpFN6zvG6h56XHznX5lEiawRqeObL0g4SAHNG5tiO0Rdjwtckeuz~diwLVBOUqPaeDGOABlpUJQFoy~Dx7FxK65MyPXUZ7CtUVqjKkyl-jfnl0DwIpOiI9K2HJjtV7FlPbc28C4JeniafBr0nUkoWAjzcyyOr37v0xNw2EBy91mBc33kDUlwbqom9f-leRPZQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/bd94/067c/4750be7f93ae65cf6828daa25ae301f0?Expires=1593388800&Signature=ItXPW-xlNDLNziv7Maamv-n6HRo4UNRnfaQGBGUhHQUKZYplg2RtRlf198c-U5rDBU0Oe9UBbC8JUAMZRs1jnKs1I~UTBS0Dpq-qn1wR-q0ZJZRNmUHmiOjQ9j9GekidMJHEq-rh7qZB38ttdI72Db46WOeuA6NxvRYqe8j1CUXKpgNL-nfLcvofSYQWpTZ6n1aA4IpzlzT2ginbOhesp2yJHkgBbkIQm9It~SnTl7EoVzzDErD5KjmltO4nUBWTKYmgEdf0zEaNPQn8fF2vtKUQtz9TkdwyeVjHqhSd9aptH2vdKSZhbm8KO15BIs1ZczuQ05YQJ2RJfU8fbu5NUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/bd94/067c/4750be7f93ae65cf6828daa25ae301f0?Expires=1593388800&Signature=ItXPW-xlNDLNziv7Maamv-n6HRo4UNRnfaQGBGUhHQUKZYplg2RtRlf198c-U5rDBU0Oe9UBbC8JUAMZRs1jnKs1I~UTBS0Dpq-qn1wR-q0ZJZRNmUHmiOjQ9j9GekidMJHEq-rh7qZB38ttdI72Db46WOeuA6NxvRYqe8j1CUXKpgNL-nfLcvofSYQWpTZ6n1aA4IpzlzT2ginbOhesp2yJHkgBbkIQm9It~SnTl7EoVzzDErD5KjmltO4nUBWTKYmgEdf0zEaNPQn8fF2vtKUQtz9TkdwyeVjHqhSd9aptH2vdKSZhbm8KO15BIs1ZczuQ05YQJ2RJfU8fbu5NUg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		createdAt: "2 weeks ago",
-		views: "345k",
+		createdAt: '2 weeks ago',
+		views: '345k',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/8e21/18b4/c0d8f1114b47062b35c47fb568fb48a5?Expires=1593388800&Signature=ZaBi7Wf9-bGZbtyqlbCl-TNCZDiWaaoiO3tMyYJVliHhuCvafyheMpBUPn8XSZQsntvmSW2A1rfLfPw-e-t1tCUw6uBIOWexRRhoNDfHWvXLUy4bcij2-D54Mo7LyL1ASLLzoTTDVCLoESNFEb3X8ntBWNOOVIy-1qLYuBdeP1vdJmcov5I4U46ge0sSPvetv0SS~3wW4CYO7zZ8Wi1CrA8mxQiMsnXCl97Vat5ngT46QZzZwVOtcmXH8KxQcn-e0MWBZFMAB5vzs2SdAX~l~3z7McrULM9-wPavJiw7dH4fUbVH7qQ-oS9dZ0t2sod3dRPGTj73Su3WVL2RlnQUqg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/8e21/18b4/c0d8f1114b47062b35c47fb568fb48a5?Expires=1593388800&Signature=ZaBi7Wf9-bGZbtyqlbCl-TNCZDiWaaoiO3tMyYJVliHhuCvafyheMpBUPn8XSZQsntvmSW2A1rfLfPw-e-t1tCUw6uBIOWexRRhoNDfHWvXLUy4bcij2-D54Mo7LyL1ASLLzoTTDVCLoESNFEb3X8ntBWNOOVIy-1qLYuBdeP1vdJmcov5I4U46ge0sSPvetv0SS~3wW4CYO7zZ8Wi1CrA8mxQiMsnXCl97Vat5ngT46QZzZwVOtcmXH8KxQcn-e0MWBZFMAB5vzs2SdAX~l~3z7McrULM9-wPavJiw7dH4fUbVH7qQ-oS9dZ0t2sod3dRPGTj73Su3WVL2RlnQUqg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/f712/25ac/62a18f581f6a5aae66ac4e9b7b21fafc?Expires=1593388800&Signature=YO2e7eBwPVF05C4tlUeWVmq5o3KOpo9yyoM1khSbywLj1Kv1BIIFdjD6IBLO9Oifm8A-Ws2IlypjWuykVe9nydcoCp28VzQ~ifYtfr97plLxVcOYiYMu7HDIEpPK4UKZi3AFSvqdIAUrr-YBu2noRt8Kg-BbzMG2DV3zKTAga2zMJ-cYu5-xiW6gctEr8nl6QF7luvBYZkHTYRaMTXpsRdN-b2VoW7BX1mxm1FDWyhZ9aaEqZ8dIE3ct8t6J2ybxryrMVxLpjP-T0124N27Z9Xp4WzSTOSjfBjn~Q7mtqHk141~pq1-dQe1dO2V7JQN3AvTt4eEeCvpXQqbA0VMPnw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/f712/25ac/62a18f581f6a5aae66ac4e9b7b21fafc?Expires=1593388800&Signature=YO2e7eBwPVF05C4tlUeWVmq5o3KOpo9yyoM1khSbywLj1Kv1BIIFdjD6IBLO9Oifm8A-Ws2IlypjWuykVe9nydcoCp28VzQ~ifYtfr97plLxVcOYiYMu7HDIEpPK4UKZi3AFSvqdIAUrr-YBu2noRt8Kg-BbzMG2DV3zKTAga2zMJ-cYu5-xiW6gctEr8nl6QF7luvBYZkHTYRaMTXpsRdN-b2VoW7BX1mxm1FDWyhZ9aaEqZ8dIE3ct8t6J2ybxryrMVxLpjP-T0124N27Z9Xp4WzSTOSjfBjn~Q7mtqHk141~pq1-dQe1dO2V7JQN3AvTt4eEeCvpXQqbA0VMPnw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/4baa/8670/e77491e871584e97b955d728627020f3?Expires=1593388800&Signature=LkSz8F8wftV81dxfumpYE5CToghiq5a3hvwywrhwVAXFwQvNzfymCImBCY9wIxILX4nnOlaNX0g~~iZ2RXD104VvLn6q967Hlg0uAH1h3eutIZzb4sQ0i4R-wXUw5ZNy2QjLCOIlKuCXMXSO1UiI8t8CJtdel9XaSqm1u~JsPFhRjRlO60RCi2cM2pJ~8G~kofCMT6J3NMgyRruVLUDY9FPGh5dI5XRFmeKbMThO2IT5KfUGsPDLb98i8gBrkLe2EKMx2DxHlDxcA3j2LVtf4yaGG-EmeDrQflknjdoAY0BKfC8Mob10ldGsYnJsMHOraz971POWOVpWTuoF0h6nNg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/e0d6/4163/147cd1502ba0a99ea7258f31be9812b3?Expires=1593388800&Signature=av5e4oaaYXVDxA9U0DAQKuwA-vyC4VRaGYz2lO5IIaz-CP55B717sXn-V6H6JzMNZ7JavA9q8~uMK-r9jd-yxoia1UopEiUeSkZgQlbBhd4DEVBPoMhMF3nC--mZ4bQnVvK9xN933TCm9z46jkAOZ7U8UYp5TlA829Rnmgw3QkaNlPLW5UkgU04k6pAae5Y3t9pAnwErmDCDjHuaXKrCjCuG0zwk84f0JQAcZt4VojD8kVDFCf0IOHdZtIQMUk47CQfdWJ2KDBkm1oOcVAweTSHXdwzpiFQ~o1i-hZVYtgzIiGTE6IqW3qsksqiLtWwMsui2dvWXVu2actRRwR~OTg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/e0d6/4163/147cd1502ba0a99ea7258f31be9812b3?Expires=1593388800&Signature=av5e4oaaYXVDxA9U0DAQKuwA-vyC4VRaGYz2lO5IIaz-CP55B717sXn-V6H6JzMNZ7JavA9q8~uMK-r9jd-yxoia1UopEiUeSkZgQlbBhd4DEVBPoMhMF3nC--mZ4bQnVvK9xN933TCm9z46jkAOZ7U8UYp5TlA829Rnmgw3QkaNlPLW5UkgU04k6pAae5Y3t9pAnwErmDCDjHuaXKrCjCuG0zwk84f0JQAcZt4VojD8kVDFCf0IOHdZtIQMUk47CQfdWJ2KDBkm1oOcVAweTSHXdwzpiFQ~o1i-hZVYtgzIiGTE6IqW3qsksqiLtWwMsui2dvWXVu2actRRwR~OTg__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/63ab/b514/2a10cf17ceaf00972e7c12c18cacd832?Expires=1593388800&Signature=WRk44Vxkc1mYbXSdGroHP8Hvd4dfhtWMukS~2yfNlY6KSb94ZzeFaKID8dMj4wznZo-sSp~lAagV7NJMFO9QLCEw0E7YeX3TnOWeFDrx63wkc388h-srSxxrNVUpB6WUCfkPtdusDrfKOx2HvM6zZLlSgYs4-McX2VTJ-g7bKx2Pzt64mox6wTGlbXWREkV2sbLSBSF6P0fpwge3VPt5jX1E~vDJ8X4mtZgN1DRIQMtc2dfZhZhyL1jNeIZe5WJyOcY9b2E3KL54pWt13UGsI08nTzloqOPFAt~fHwbwUbwWeelbjkzSABh55KYVNePerISUIy~esGJ11px7l9oWTw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/63ab/b514/2a10cf17ceaf00972e7c12c18cacd832?Expires=1593388800&Signature=WRk44Vxkc1mYbXSdGroHP8Hvd4dfhtWMukS~2yfNlY6KSb94ZzeFaKID8dMj4wznZo-sSp~lAagV7NJMFO9QLCEw0E7YeX3TnOWeFDrx63wkc388h-srSxxrNVUpB6WUCfkPtdusDrfKOx2HvM6zZLlSgYs4-McX2VTJ-g7bKx2Pzt64mox6wTGlbXWREkV2sbLSBSF6P0fpwge3VPt5jX1E~vDJ8X4mtZgN1DRIQMtc2dfZhZhyL1jNeIZe5WJyOcY9b2E3KL54pWt13UGsI08nTzloqOPFAt~fHwbwUbwWeelbjkzSABh55KYVNePerISUIy~esGJ11px7l9oWTw__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
 	{
-		title: "Sample Video Title",
-		channel: "Channel Name",
+		title: 'Sample Video Title',
+		channel: 'Channel Name',
 		showChannel: true,
-		views: "345k",
-		createdAt: "2 weeks ago",
+		views: '345k',
+		createdAt: '2 weeks ago',
 		poster:
-			"https://s3-alpha-sig.figma.com/img/b327/39be/143853e8ca345927ee54a7ca9acaed0c?Expires=1593388800&Signature=G1vikiLUBwdBdrzS3RC1WScSJSAAD7FEteNX4bfPf0VQL0w9fsMfha31S-l6EHxU~WTh3GAic8X5furwHjwLbE2nVUIiA0q6Rizxfd8kT97Z-9uQzPbCkla6a1qIX-7wq19t2evAVST--Sz7wfEYVCUTdZaEmqgBsJnYI3fl7nzrwLhaaTTN3liOTltgvlQn8btRClliTWENyHBwu6cwvMHuX6ePt5swhIj4gz34F0MyY~PtnsFbBHFerShd3t2DYsMqDv8CEB089v6IYZh87Rnqk7jJFZC2ZBULhjlwKQpboJOI35cov3aGOnuTe5vcmULLSfEXuV5kWJrtzJnQlA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA",
+			'https://s3-alpha-sig.figma.com/img/b327/39be/143853e8ca345927ee54a7ca9acaed0c?Expires=1593388800&Signature=G1vikiLUBwdBdrzS3RC1WScSJSAAD7FEteNX4bfPf0VQL0w9fsMfha31S-l6EHxU~WTh3GAic8X5furwHjwLbE2nVUIiA0q6Rizxfd8kT97Z-9uQzPbCkla6a1qIX-7wq19t2evAVST--Sz7wfEYVCUTdZaEmqgBsJnYI3fl7nzrwLhaaTTN3liOTltgvlQn8btRClliTWENyHBwu6cwvMHuX6ePt5swhIj4gz34F0MyY~PtnsFbBHFerShd3t2DYsMqDv8CEB089v6IYZh87Rnqk7jJFZC2ZBULhjlwKQpboJOI35cov3aGOnuTe5vcmULLSfEXuV5kWJrtzJnQlA__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA',
 	},
-];
+]
 
 const articleStyles = css`
 	max-width: 320px;
 	margin-right: 1.25rem;
-`;
+`
 
 const VideoGallery: React.FC<Partial<VideoGalleryProps>> = ({ title, action }) => {
-	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders);
-	const [controlsTop, setControlsTop] = useState<SerializedStyles>(css``);
+	const videos = videoPlaceholders.concat(videoPlaceholders).concat(videoPlaceholders)
+	const [controlsTop, setControlsTop] = useState<SerializedStyles>(css``)
 
-	const CAROUSEL_WHEEL_HEIGHT = 48;
+	const CAROUSEL_WHEEL_HEIGHT = 48
 	const imgRef = useCallback((node: HTMLImageElement) => {
 		if (node != null) {
 			setControlsTop(css`
 				top: calc(${Math.round(node.clientHeight) / 2}px - ${CAROUSEL_WHEEL_HEIGHT / 2}px);
-			`);
+			`)
 		}
-	}, []);
+	}, [])
 	return (
 		<Gallery title={title} action={action} leftControlCss={controlsTop} rightControlCss={controlsTop}>
 			{videos.map((video, idx) => (
@@ -126,7 +126,7 @@ const VideoGallery: React.FC<Partial<VideoGalleryProps>> = ({ title, action }) =
 				</article>
 			))}
 		</Gallery>
-	);
-};
+	)
+}
 
-export default VideoGallery;
+export default VideoGallery

packages/app/src/index.tsx

@@ -1,5 +1,6 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+import './styles.css'
 
-ReactDOM.render(<App />, document.getElementById("root"));
+ReactDOM.render(<App />, document.getElementById('root'))

packages/app/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

packages/app/src/shared/.storybook/.babelrc

@@ -1,3 +0,0 @@
-{
-  "presets": ["@emotion/babel-preset-css-prop"]
-}

packages/app/src/shared/.storybook/main.js

@@ -1,6 +1,4 @@
-const path = require("path");
-
-const IconsDir = path.join(__dirname, "..", "icons");
+const reactConfig = require("../../../config-overrides");
 
 module.exports = {
 	stories: ["../stories/**/*.stories.(js|jsx|ts|tsx|mdx)"],
@@ -11,38 +9,9 @@ module.exports = {
 		"@storybook/addon-storysource",
 		"storybook-addon-jsx/register",
 		"@storybook/addon-docs",
+		"@storybook/preset-create-react-app"
 	],
 	webpackFinal: async (config) => {
-		// Disable the Storybook internal-`.svg`-rule for components loaded from our app.
-		const svgRule = config.module.rules.find((rule) => "test.svg".match(rule.test));
-		svgRule.exclude = [IconsDir];
-		config.module.rules.push({
-			test: /\.svg$/i,
-			include: [IconsDir],
-			use: [
-				{
-					loader: "@svgr/webpack",
-					options: {},
-				},
-			],
-		});
-
-		config.module.rules.push({
-			test: /\.(ts|tsx)$/,
-			use: [
-				{
-					loader: require.resolve("babel-loader"),
-					options: {
-						rootMode: "upward",
-					},
-				},
-				// Optional
-				{
-					loader: require.resolve("react-docgen-typescript-loader"),
-				},
-			],
-		});
-		config.resolve.extensions.push(".ts", ".tsx");
-		return config;
+		return reactConfig.webpack(config);
 	},
 };

packages/app/src/shared/components/Sidenav/Sidenav.tsx

@@ -8,7 +8,7 @@ type NavSubitem = {
 	name: string;
 };
 
-export type NavItem = {
+type NavItem = {
 	subitems?: NavSubitem[];
 	icon: React.ReactNode;
 } & NavSubitem;
@@ -91,4 +91,4 @@ const NavItem: React.FC<NavItemProps> = ({ expanded, subitems, children }) => {
 	);
 };
 
-export default Sidenav;
+export { Sidenav as default, NavItem }

packages/app/src/shared/icons/index.ts

@@ -1,13 +1,13 @@
-export { default as BarsIcon } from "./bars.svg";
-export { default as HomeIcon } from "./home.svg";
-export { default as BinocularIcon } from "./binocular.svg";
-export { default as BrowseIcon } from "./browse.svg";
-export { default as BooksIcon } from "./books.svg";
-export { default as BlockIcon } from "./block.svg";
-export { default as ChevronIconUp } from "./chevron-down-big.svg";
-export { default as ChevronIconDown } from "./chevron-up-big.svg";
-export { default as ChevronRightIcon } from "./chevron-right-big.svg";
-export { default as ChevronLeftIcon } from "./chevron-left-big.svg";
-export { default as CheckIcon } from "./check.svg";
-export { default as DashIcon } from "./dash.svg";
-export { default as Play } from "./play.svg";
+export { ReactComponent as BarsIcon } from './bars.svg'
+export { ReactComponent as HomeIcon } from './home.svg'
+export { ReactComponent as BinocularIcon } from './binocular.svg'
+export { ReactComponent as BrowseIcon } from './browse.svg'
+export { ReactComponent as BooksIcon } from './books.svg'
+export { ReactComponent as BlockIcon } from './block.svg'
+export { ReactComponent as ChevronIconUp } from './chevron-down-big.svg'
+export { ReactComponent as ChevronIconDown } from './chevron-up-big.svg'
+export { ReactComponent as ChevronRightIcon } from './chevron-right-big.svg'
+export { ReactComponent as ChevronLeftIcon } from './chevron-left-big.svg'
+export { ReactComponent as CheckIcon } from './check.svg'
+export { ReactComponent as DashIcon } from './dash.svg'
+export { ReactComponent as Play } from './play.svg'

packages/app/src/styles.css

@@ -0,0 +1,16 @@
+@font-face {
+	font-family: Inter;
+	font-weight: 300;
+	src: url('./assets/fonts/Inter-ExtraLight-BETA.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Inter;
+	src: url('./assets/fonts/Inter-Regular.ttf') format('truetype');
+}
+
+@font-face {
+	font-family: Inter;
+	font-weight: bold;
+	src: url('./assets/fonts/Inter-Bold.ttf') format('truetype');
+}

packages/app/src/views/HomeView.tsx

@@ -1,10 +1,10 @@
-import { css } from "@emotion/core";
-import React from "react";
-import { ChannelGallery, Hero, Main, SeriesGallery, TagsGallery, VideoGallery } from "components";
-import { RouteComponentProps } from "@reach/router";
+import { css } from '@emotion/core'
+import React from 'react'
+import { ChannelGallery, Hero, Main, SeriesGallery, TagsGallery, VideoGallery } from '@/components'
+import { RouteComponentProps } from '@reach/router'
 
 const backgroundImg =
-	"https://s3-alpha-sig.figma.com/img/351c/9556/7bd65e79c56d66e273279ce04f8574aa?Expires=1593388800&Signature=PAvJw8izjlFlZRMv9V9zMNkyZPimYsj4PzJGXk0Q6mDPlV6Z87PLAT9xyImbi~p263Mu7bMcT8jdqjayXQq3iEgn1JxdYVCrHSyXgCrfmwxmWMZktEY-4kyO9M1RSWBlF9fsd19a45m0L9NtesyDU0IYz51tfYwE2OUE21TJmi4vdjiilPg6kRhPA3Z2N-Vj9ir9of7PtidoQwF-8b9fPejs7nDAHs3AX6YpIYTA36v2TGtS1emtxOCrO6JaRkr61yEdERo1RAVIeK36TeWXcCNE~mIIVoy~A9Abics4O2yQc0oxspu0Ac987NC-kGAHQS8FNeiAxWy7Ux49oNEMfQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA";
+	'https://s3-alpha-sig.figma.com/img/351c/9556/7bd65e79c56d66e273279ce04f8574aa?Expires=1593388800&Signature=PAvJw8izjlFlZRMv9V9zMNkyZPimYsj4PzJGXk0Q6mDPlV6Z87PLAT9xyImbi~p263Mu7bMcT8jdqjayXQq3iEgn1JxdYVCrHSyXgCrfmwxmWMZktEY-4kyO9M1RSWBlF9fsd19a45m0L9NtesyDU0IYz51tfYwE2OUE21TJmi4vdjiilPg6kRhPA3Z2N-Vj9ir9of7PtidoQwF-8b9fPejs7nDAHs3AX6YpIYTA36v2TGtS1emtxOCrO6JaRkr61yEdERo1RAVIeK36TeWXcCNE~mIIVoy~A9Abics4O2yQc0oxspu0Ac987NC-kGAHQS8FNeiAxWy7Ux49oNEMfQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA'
 
 const HomeView: React.FC<RouteComponentProps> = () => (
 	<>
@@ -27,6 +27,6 @@ const HomeView: React.FC<RouteComponentProps> = () => (
 			<VideoGallery title="Newest Videos" action="See All" />
 		</Main>
 	</>
-);
+)
 
-export default HomeView;
+export default HomeView

packages/app/tsconfig.json

@@ -1,22 +1,29 @@
 {
-	"extends": "../../tsconfig.json",
-
-	"compilerOptions": {
-		"baseUrl": "./src",
-		"declaration": true,
-		"declarationDir": "dist",
-		"lib": ["DOM", "ES2019"],
-		"paths": {
-			"components": ["components"],
-			"shared": ["shared"],
-			"shared/*": ["shared/*"],
-			"store": ["store"],
-			"theme": ["theme"],
-			"views": ["views"]
-		}
-	},
-
-	"exclude": ["node_modules", "dist", "src/shared/stories"],
-
-	"include": ["src/**/*.tsx", "src/**/*.ts"]
+  "extends": "./tsconfig.paths.json",
+  "compilerOptions": {
+    "target": "es2019",
+    "baseUrl": "./",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es2019"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "dist",
+    "src/shared/stories"
+  ],
+  "include": [
+    "src"
+  ]
 }

packages/app/tsconfig.paths.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

tsconfig.json

@@ -4,7 +4,7 @@
 		"sourceMap": true,
 		"strict": true,
 		"esModuleInterop": true,
-		"jsx": "preserve"
+		"jsx": "react"
 	},
 	"exclude": ["node_modules", "dist"]
 }