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/molecules/demo-discord/DemoDiscord.stories.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { DemoDiscord } from './DemoDiscord';
+
+export default {
+    title: 'Molecules/Role Demos',
+};
+
+export const Discord = () => <DemoDiscord />;

packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts

@@ -0,0 +1,67 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled, { keyframes } from 'styled-components';
+
+export const Base = styled.div`
+    background-color: ${palette.discord100};
+    border: solid 1px rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+    padding: 10px;
+    user-select: none;
+`;
+
+export const Timestamp = styled.span`
+    padding: 0 5px;
+    font-size: 0.7em;
+    opacity: 0.3;
+`;
+
+export const TextParts = styled.span`
+    padding: 0 5px;
+`;
+
+export const Username = styled(TextParts)`
+    &:hover {
+        text-decoration: underline;
+        cursor: pointer;
+    }
+`;
+
+export const InputBox = styled.div`
+    margin-top: 10px;
+    background-color: ${palette.discord200};
+    padding: 7px 10px;
+    border-radius: 3px;
+`;
+
+const lineBlink = keyframes`
+    0% {
+        opacity: 1;
+    }
+
+    40% {
+        opacity: 1;
+    }
+
+    60% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+`;
+
+export const Line = styled.div`
+    background-color: ${palette.grey600};
+    width: 1px;
+    height: 1.5em;
+    display: inline-block;
+    position: absolute;
+    right: -5px;
+    animation: ${lineBlink} 0.5s ease-in-out infinite alternate-reverse;
+`;
+
+export const InputTextAlignment = styled.div`
+    position: relative;
+    display: inline-block;
+`;

packages/design-system/molecules/demo-discord/DemoDiscord.tsx

@@ -0,0 +1,53 @@
+import { Typist } from '@roleypoly/design-system/atoms/typist';
+import { demoData } from '@roleypoly/types/demoData';
+import * as React from 'react';
+import {
+    Base,
+    InputBox,
+    InputTextAlignment,
+    Line,
+    TextParts,
+    Timestamp,
+    Username,
+} from './DemoDiscord.styled';
+
+export const DemoDiscord = () => {
+    const time = new Date();
+    const timeString = time.toTimeString();
+
+    const [easterEggCount, setEasterEggCount] = React.useState(0);
+
+    return (
+        <Base>
+            <Timestamp>
+                {time.getHours() % 12}:{timeString.slice(3, 5)}&nbsp;
+                {time.getHours() <= 12 ? 'AM' : 'PM'}
+            </Timestamp>
+            <Username onClick={() => setEasterEggCount(easterEggCount + 1)}>
+                okano&nbsp;cat
+            </Username>
+            <TextParts>
+                {easterEggCount >= 15
+                    ? `NYAAAAAAA${'A'.repeat(easterEggCount - 15)}`
+                    : easterEggCount >= 11
+                    ? `I'm.. I'm gonna...`
+                    : easterEggCount >= 10
+                    ? `S-senpai... Be careful...`
+                    : easterEggCount >= 5
+                    ? `H-hey... Stop that..`
+                    : `Hey, I'd like some roles!`}
+            </TextParts>
+            <InputBox>
+                <InputTextAlignment>
+                    &nbsp;
+                    <Typist
+                        resetTimeout={2000}
+                        charTimeout={75}
+                        lines={demoData.map((role) => `.iam ${role.name}`)}
+                    />
+                    <Line />
+                </InputTextAlignment>
+            </InputBox>
+        </Base>
+    );
+};

packages/design-system/molecules/demo-discord/index.ts

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