Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161)

* chore: restructure project into yarn workspaces, remove next

* fix tests, remove webapp from terraform

* remove more ui deployment bits

* remove pages, fix FUNDING.yml

* remove isomorphism

* remove next providers

* fix linting issues

* feat: start basis of new web ui system on CRA

* chore: move types to @roleypoly/types package

* chore: move src/common/utils to @roleypoly/misc-utils

* chore: remove roleypoly/ path remappers

* chore: renmove vercel config

* chore: re-add worker-types to api package

* chore: fix type linting scope for api

* fix(web): craco should include all of packages dir

* fix(ci): change api webpack path for wrangler

* chore: remove GAR actions from CI

* chore: update codeql job

* chore: test better github dar matcher in lint-staged

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { mediaQueryDefs } from './Breakpoints';
+import { BreakpointContext, ScreenSize } from './Context';
+
+const resetScreen: ScreenSize = {
+    onSmallScreen: false,
+    onTablet: false,
+    onDesktop: false,
+};
+
+export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
+    public state = {
+        ...resetScreen,
+        onSmallScreen: true,
+    };
+
+    private mediaQueries: { [key in keyof ScreenSize]: MediaQueryList } = {
+        onSmallScreen: window.matchMedia(
+            mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
+        ),
+        onTablet: window.matchMedia(
+            mediaQueryDefs.onTablet.replace('@media screen and', '')
+        ),
+        onDesktop: window.matchMedia(
+            mediaQueryDefs.onDesktop.replace('@media screen and', '')
+        ),
+    };
+
+    componentDidMount() {
+        Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
+            mediaQuery.addEventListener('change', this.handleMediaEvent)
+        );
+    }
+
+    componentWillUnmount() {
+        Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
+            mediaQuery.removeEventListener('change', this.handleMediaEvent)
+        );
+    }
+
+    handleMediaEvent = (event: MediaQueryListEvent) => {
+        console.log('handleMediaEvent', { event });
+        this.setState({
+            ...resetScreen,
+            ...this.calculateScreen(),
+        });
+    };
+
+    calculateScreen = () => {
+        if (this.mediaQueries.onDesktop.matches) {
+            return { onDesktop: true };
+        }
+
+        if (this.mediaQueries.onTablet.matches) {
+            return { onTablet: true };
+        }
+
+        return { onSmallScreen: true };
+    };
+
+    render() {
+        return (
+            <BreakpointContext.Provider value={{ screenSize: { ...this.state } }}>
+                {this.props.children}
+            </BreakpointContext.Provider>
+        );
+    }
+}