Merge branch 'master' into feat/home

# Conflicts:
#	src/App.tsx
#	src/hooks/usePlaylist.ts
#	src/providers/QueryProvider.tsx
#	src/screens/Home/Home.module.scss
#	src/screens/Home/Home.tsx

jest.config.js

@@ -1,3 +1,12 @@
+const {
+  transform,
+  ...rest
+} = require('@snowpack/app-scripts-react/jest.config.js')();
+
 module.exports = {
-  ...require('@snowpack/app-scripts-react/jest.config.js')(),
+  transform: {
+    '.+\\.(css|styl|less|sass|scss)$': 'jest-css-modules-transform',
+    ...transform,
+  },
+  ...rest,
 };

lighthouserc.js

@@ -1,18 +1,16 @@
 module.exports = {
   ci: {
     collect: {
-      url                    : [
-        'http://127.0.0.1:4000'
-      ],
-      startServerCommand     : 'http-server ./build -p 4000 -g',
+      url: ['http://127.0.0.1:4000'],
+      startServerCommand: 'http-server ./build -p 4000 -g',
       startServerReadyPattern: 'Available on',
-      numberOfRuns           : 1
+      numberOfRuns: 1,
     },
-    upload : {
-      'target': 'temporary-public-storage'
+    upload: {
+      target: 'temporary-public-storage',
     },
-    assert : {
-      'preset': 'lighthouse:recommended',
-    }
-  }
+    assert: {
+      preset: 'lighthouse:no-pwa',
+    },
+  },
 };

package.json

@@ -45,6 +45,7 @@
     "@types/jest": "^26.0.22",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "@types/react-router-dom": "^5.1.7",
     "@types/snowpack-env": "^2.3.3",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
     "@typescript-eslint/parser": "^4.22.0",
@@ -58,6 +59,7 @@
     "eslint-watch": "^7.0.0",
     "husky": "^6.0.0",
     "jest": "^26.6.3",
+    "jest-css-modules-transform": "^4.2.1",
     "lint-staged": "^10.5.4",
     "postcss": "^8.2.10",
     "postcss-cli": "^8.3.1",

scripts/blueprint/base/Base.module.scss

@@ -1,6 +1,2 @@
 @use '../../styles/variables';
 @use '../../styles/theme';
-
-.basis {
-  // component styling
-}

scripts/blueprint/base/Base.test.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 
 import Base from './Base';
 
-describe('Base Component tests', () => {
-  test('dummy test', () => {
-    render(<Base></Base>);
-    expect(screen.getByText('hello world')).toBeInTheDocument();
+describe('<Base>', () => {
+  test('renders and matches snapshot', () => {
+    const { container } = render(<Base />);
+
+    expect(container).toMatchSnapshot();
   });
 });

scripts/blueprint/base/Base.tsx

@@ -2,15 +2,14 @@ import React from 'react';
 
 import styles from './Base.module.scss';
 
-type BaseProps = {
-  dummy?: string;
+type Props = {
+  prop?: string;
 };
 
-const Base: React.FC<BaseProps> = ({ dummy = 'defaultValue' }: BaseProps) => {
+const Base: React.FC<Props> = ({ prop }: Props) => {
   return (
-    <div className={styles['base']}>
-      <p>hello world</p>
-      <p>{dummy}</p>
+    <div className={styles.base}>
+      <p>{prop}</p>
     </div>
   );
 };

snowpack.config.js

@@ -1,10 +1,16 @@
 /** @type {import("snowpack").SnowpackUserConfig } */
 module.exports = {
-  mount         : {
+  mount: {
     public: { url: '/', static: true },
-    src   : { url: '/dist' },
+    src: { url: '/dist' },
   },
-  plugins       : [
+  alias: {
+    '@components': './src/components/*',
+    '@container': './src/container/*',
+    '@types': './src/types/*',
+    '@app': './src/*',
+  },
+  plugins: [
     '@snowpack/plugin-postcss',
     '@snowpack/plugin-react-refresh',
     '@snowpack/plugin-dotenv',
@@ -16,30 +22,36 @@ module.exports = {
         ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),
       },
     ],
-    ['@snowpack/plugin-run-script', {
-      name : 'eslint',
-      cmd  : 'eslint src --ext .js,.jsx,.ts,.tsx',
-      watch: 'esw -w --clear src --ext .js,.jsx,.ts,.tsx'
-    }],
-    ['@snowpack/plugin-run-script', {
-      name: 'stylelint',
-      cmd : 'stylelint src/**/*.scss'
-    }],
+    [
+      '@snowpack/plugin-run-script',
+      {
+        name: 'eslint',
+        cmd: 'eslint src --ext .js,.jsx,.ts,.tsx',
+        watch: 'esw -w --clear src --ext .js,.jsx,.ts,.tsx',
+      },
+    ],
+    [
+      '@snowpack/plugin-run-script',
+      {
+        name: 'stylelint',
+        cmd: 'stylelint src/**/*.scss',
+      },
+    ],
   ],
-  routes        : [
+  routes: [
     /* Enable an SPA Fallback in development: */
   ],
-  optimize      : {
+  optimize: {
     /* Example: Bundle your final build: */
     // "bundle": true,
   },
   packageOptions: {
     /* ... */
   },
-  devOptions    : {
+  devOptions: {
     /* ... */
   },
-  buildOptions  : {
+  buildOptions: {
     /* ... */
   },
 };

src/App.tsx

@@ -1,27 +1,41 @@
-import React from 'react';
+import React, { Component } from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
 
-import QueryProvider from './providers/QueryProvider';
+import Root from './components/Root/Root';
 import ConfigProvider from './providers/configProvider';
-import Home from './screens/Home/Home';
-
+import QueryProvider from './providers/QueryProvider';
 import './styles/main.scss';
 
-function App() {
-  return (
-    <ConfigProvider
-      configLocation={window.configLocation}
-      onLoading={(isLoading: boolean) =>
-        console.info(`Loading config: ${isLoading}`)
-      }
-      onValidationError={(error: Error) => console.error(`Config ${error}`)}
-    >
+interface State {
+  error: Error | null;
+}
+
+class App extends Component {
+  public state: State = {
+    error: null,
+  };
+
+  componentDidCatch(error: Error) {
+    this.setState({ error });
+  }
+
+  render() {
+    return (
       <QueryProvider>
-        <div className="App">
-          <Home />
-        </div>
+        <ConfigProvider
+          configLocation={window.configLocation}
+          onLoading={(isLoading: boolean) =>
+            console.info(`Loading config: ${isLoading}`)
+          }
+          onValidationError={(error: Error) => console.error(`Config ${error}`)}
+        >
+          <Router>
+            <Root error={this.state.error} />
+          </Router>
+        </ConfigProvider>
       </QueryProvider>
-    </ConfigProvider>
-  );
+    );
+  }
 }
 
 export default App;

src/components/ButtonLink/ButtonLink.module.scss

@@ -0,0 +1,52 @@
+@use '../../styles/variables';
+@use '../../styles/theme';
+@use '../../styles/mixins/responsive';
+@use '../../styles/mixins/utils';
+
+//
+// Navigation Button
+// --------------------------------
+
+.link {
+  position: relative;
+  display: inline-flex;
+  justify-content: inherit;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 10px;
+  color: inherit;
+  font-family: theme.$body-alt-font-family;
+  font-weight: 700;
+  text-align: center;
+  text-decoration: none;
+  background: transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: background 0.1s ease, transform 0.1s ease;
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover,
+    &:active {
+      z-index: 1;
+      background: rgba(variables.$black, 0.7);
+      transform: scale(1.1);
+      opacity: 1;
+    }
+  }
+}
+
+.active {
+  color: variables.$white;
+  opacity: 1;
+}
+
+//
+// mediaQueries
+// --------------------------------
+
+@include responsive.mobile-and-tablet() {
+  .link {
+    padding: 12px;
+  }
+}

src/components/ButtonLink/ButtonLink.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { render } from '../../testUtils';
+
+import ButtonLink from './ButtonLink';
+
+describe('<ButtonLink />', () => {
+  test('renders link with route label', () => {
+    const { getByText } = render(<ButtonLink label="home" to="/" />);
+    expect(getByText(/home/i)).toBeTruthy();
+  });
+
+  it('renders and matches snapshot', () => {
+    const { container } = render(<ButtonLink label="home" to="/" />);
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/ButtonLink/ButtonLink.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import styles from './ButtonLink.module.scss';
+
+type Props = {
+  label: string;
+  to: string;
+};
+
+const ButtonLink: React.FC<Props> = ({ label, to }) => {
+  return (
+    <NavLink
+      className={styles.link}
+      activeClassName={styles.active}
+      to={to}
+      exact
+    >
+      <span className={styles.buttonLabel}>{label}</span>
+    </NavLink>
+  );
+};
+
+export default ButtonLink;

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ButtonLink /> renders and matches snapshot 1`] = `
+<div>
+  <a
+    aria-current="page"
+    class="link active"
+    href="/"
+  >
+    <span>
+      home
+    </span>
+  </a>
+</div>
+`;