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/organisms/app-shell/AppShell.stories.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { mastheadSlugs, user } from '../../fixtures/storyData';
+import { AppShell } from './AppShell';
+
+export default {
+    title: 'Organisms/App Shell',
+    component: AppShell,
+};
+
+export const Guest = () => (
+    <AppShell showFooter user={null}>
+        <h1>Hello World</h1>
+    </AppShell>
+);
+
+export const LoggedIn = () => (
+    <AppShell user={user} guilds={mastheadSlugs}>
+        <h1>Hello World</h1>
+    </AppShell>
+);

packages/design-system/organisms/app-shell/AppShell.styled.tsx

@@ -0,0 +1,24 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
+import styled, { createGlobalStyle } from 'styled-components';
+
+export const Content = styled.div<{ small?: boolean }>`
+    margin: 0 auto;
+    margin-top: 50px;
+    width: ${(props) => (props.small ? '960px' : '1024px')};
+    max-width: 98vw;
+    max-height: calc(100vh - 50px);
+`;
+
+export const GlobalStyles = createGlobalStyle`
+    body {
+        background-color: ${palette.taupe200};
+        color: ${palette.grey600};
+        overflow-y: hidden;
+        scroll-behavior: smooth;
+        ${fontCSS}
+    }
+    * {
+        box-sizing: border-box;
+    }
+`;

packages/design-system/organisms/app-shell/AppShell.tsx

@@ -0,0 +1,42 @@
+import { GlobalStyleColors } from '@roleypoly/design-system/atoms/colors';
+import { Footer } from '@roleypoly/design-system/molecules/footer';
+import * as Masthead from '@roleypoly/design-system/organisms/masthead';
+import { DiscordUser, GuildSlug } from '@roleypoly/types';
+import * as React from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+import { Content, GlobalStyles } from './AppShell.styled';
+
+export type AppShellProps = {
+    children: React.ReactNode;
+    user?: DiscordUser;
+    showFooter?: boolean;
+    small?: boolean;
+    activeGuildId?: string | null;
+    guilds?: GuildSlug[];
+    disableGuildPicker?: boolean;
+};
+
+export const AppShell = (props: AppShellProps) => (
+    <>
+        <GlobalStyles />
+        <GlobalStyleColors />
+        {props.user ? (
+            <Masthead.Authed
+                disableGuildPicker={props.disableGuildPicker}
+                guilds={props.guilds || []}
+                activeGuildId={props.activeGuildId || null}
+                user={props.user}
+            />
+        ) : (
+            <Masthead.Guest />
+        )}
+        <Scrollbars
+            style={{ height: 'calc(100vh - 25px)', margin: 0, padding: 0 }}
+            autoHide
+            universal
+        >
+            <Content small={props.small}>{props.children}</Content>
+            {props.showFooter && <Footer />}
+        </Scrollbars>
+    </>
+);

packages/design-system/organisms/app-shell/index.ts

@@ -0,0 +1 @@
+export * from './AppShell';