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/typography/typography.stories.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import * as typography from './typography';
+
+export default {
+    title: 'Atoms/Typography',
+};
+
+const Text = () => (
+    <>
+        <p>
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
+            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
+        </p>
+        <p>
+            帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
+            縦投記ふで覧速っだせあ過先課フ演無ぎぱべ習併相ーす気6元ゆる領気希ぎ投代ラ我関レ森郎由系堂ず.
+            読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
+        </p>
+        <p>
+            🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄 💟💲🍻💜💩🔼
+            🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯 🌞💟🎌🍌 🔪📯🐎💮
+            👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊. 🔤🍍🌸📷🎴 💏🍌📎👥👉👒
+            👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒 🐕🌈👋
+        </p>
+    </>
+);
+
+const swatches: [string, string | undefined, string][] = [
+    ['text900', 'LargeTitle', 'Used for large titles.'],
+    ['text800', 'MediumTitle', 'Used for medium titles.'],
+    ['text700', 'SmallTitle', 'Used for small titles.'],
+    ['text600', 'AccentTitle', 'Used for accenting titles.'],
+    ['text500', 'LargeText', 'Used for general large font text blocks.'],
+    ['text400', 'Text', 'Used for less important font text blocks.'],
+    ['text300', undefined, 'Used for smaller UI elements.'],
+    ['text200', 'AmbientLarge', 'Used for ambient text.'],
+    ['text100', 'AmbientSmall', 'Used for ambient text.'],
+];
+
+const Section = styled.section`
+    margin: 3.26rem;
+`;
+
+const swatch = (mixin: typeof typography.text900) =>
+    styled.p`
+        ${mixin}
+    `;
+
+const Usage = styled.code`
+    ${typography.text300}
+`;
+
+const Description = styled.i`
+    ${typography.text200}
+`;
+
+export const Sizes = () => (
+    <div>
+        {swatches.map(([mixin, componentName, usage], i) => {
+            const Component = swatch((typography as any)[mixin]);
+            return (
+                <Section key={i}>
+                    <div>
+                        <Component>
+                            The quick brown fox jumped over the lazy dog.
+                        </Component>
+                    </div>
+                    <div>
+                        <Usage>
+                            <code>
+                                @{mixin} {componentName && `<${componentName} />`}
+                            </code>
+                        </Usage>
+                    </div>
+                    <div>
+                        <Description>{usage}</Description>
+                    </div>
+                </Section>
+            );
+        })}
+    </div>
+);
+
+const SpacingHead = styled.p`
+    ${typography.text700}
+`;
+
+const SpacingSection = styled(Section)`
+    max-width: 50vw;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+`;
+
+export const Spacing = () => (
+    <div>
+        {swatches.map(([mixin], i) => {
+            const Component = swatch((typography as any)[mixin]);
+            return (
+                <SpacingSection key={i}>
+                    <SpacingHead>@{mixin}</SpacingHead>
+                    <Component>
+                        <Text />
+                    </Component>
+                </SpacingSection>
+            );
+        })}
+    </div>
+);
+
+export const Link = () => (
+    <typography.Link
+        target="_blank"
+        href="https://images.boredomfiles.com/wp-content/uploads/sites/5/2016/03/fox-door-5.png"
+    >
+        Here is a link &lt;3
+    </typography.Link>
+);