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/.storybook/main.js

@@ -0,0 +1,8 @@
+const path = require('path');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const { NormalModuleReplacementPlugin } = require('webpack');
+
+module.exports = {
+    stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+};

packages/design-system/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import { roleypolyTheme } from './theme';
+
+addons.setConfig({
+    theme: roleypolyTheme,
+});

packages/design-system/.storybook/mocks/next_link.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+
+type Props = {
+    children: React.ReactNode;
+};
+const Link = (props: Props) => <>{props.children}</>;
+
+export default Link;

packages/design-system/.storybook/preview-head.html

@@ -0,0 +1,39 @@
+<script>
+    (function (d) {
+        var config = {
+                kitId: 'bck0pci',
+                scriptTimeout: 3000,
+                async: true,
+            },
+            h = d.documentElement,
+            t = setTimeout(function () {
+                h.className = h.className.replace(/\bwf-loading\b/g, '') + ' wf-inactive';
+            }, config.scriptTimeout),
+            tk = d.createElement('script'),
+            f = false,
+            s = d.getElementsByTagName('script')[0],
+            a;
+        h.className += ' wf-loading';
+        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
+        tk.async = true;
+        tk.onload = tk.onreadystatechange = function () {
+            a = this.readyState;
+            if (f || (a && a != 'complete' && a != 'loaded')) return;
+            f = true;
+            clearTimeout(t);
+            try {
+                Typekit.load(config);
+            } catch (e) {}
+        };
+        s.parentNode.insertBefore(tk, s);
+    })(document);
+</script>
+<style>
+    body {
+        font-family: 'source-han-sans-japanese', 'Source Sans Pro', sans-serif,
+            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
+        color: #f2efef;
+        background-color: #453e3d;
+        margin: 0;
+    }
+</style>

packages/design-system/.storybook/preview.js

@@ -0,0 +1,10 @@
+import { roleypolyTheme } from './theme';
+import { mdxComponents } from '../atoms/typography/mdx';
+
+export const parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    docs: {
+        theme: roleypolyTheme,
+        components: mdxComponents,
+    },
+};

packages/design-system/.storybook/theme.js

@@ -0,0 +1,34 @@
+import { create } from '@storybook/theming';
+import { palette } from '../atoms/colors';
+
+export const roleypolyTheme = create({
+    base: 'dark',
+
+    colorPrimary: palette.green400,
+    colorSecondary: palette.taupe200,
+
+    // UI
+    appBg: palette.taupe300,
+    appContentBg: palette.taupe200,
+    appBorderColor: palette.taupe100,
+    appBorderRadius: 0,
+
+    // Typography
+    fontBase: 'system-ui, sans-serif',
+    fontCode: 'monospace',
+
+    // Text colors
+    textColor: palette.grey600,
+    textInverseColor: palette.grey100,
+
+    // Toolbar default and active colors
+    barTextColor: palette.taupe500,
+    barSelectedColor: palette.taupe600,
+    barBg: palette.taupe100,
+
+    // Form colors
+    inputBg: 'rgba(0,0,0,0.24)',
+    inputBorder: palette.taupe100,
+    inputTextColor: palette.grey600,
+    inputBorderRadius: 0,
+});