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/button/Button.spec.tsx

@@ -0,0 +1,11 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+import { Button } from './Button';
+
+it('fires an onClick callback when clicked', () => {
+    const mock = jest.fn();
+    const view = shallow(<Button onClick={mock}>Button</Button>);
+
+    view.simulate('click');
+    expect(mock).toBeCalled();
+});

packages/design-system/atoms/button/Button.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Button as ButtonComponent } from './Button';
+
+export default {
+    title: 'Atoms/Button',
+    component: ButtonComponent,
+    argTypes: {
+        content: { control: 'text' },
+    },
+    args: {
+        content: 'Press me!',
+        size: 'large',
+    },
+};
+
+export const Large = ({ content, ...args }) => (
+    <ButtonComponent {...args}>{content}</ButtonComponent>
+);
+
+export const Small = ({ content, ...args }) => (
+    <ButtonComponent {...args}>{content}</ButtonComponent>
+);
+Small.args = {
+    size: 'small',
+};

packages/design-system/atoms/button/Button.styled.ts

@@ -0,0 +1,108 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
+import { text300, text400 } from '@roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
+
+export const IconContainer = styled.div`
+    margin-right: 0.6rem;
+    font-size: 1.75em;
+`;
+
+const base = css`
+    ${fontCSS}
+
+    appearance: none;
+    display: block;
+    background-color: ${palette.taupe300};
+    color: ${palette.grey500};
+    border-radius: 3px;
+    border: 2px solid rgba(0, 0, 0, 0.55);
+    transition: all 0.15s ease-in-out;
+    outline: 0;
+    position: relative;
+    user-select: none;
+    cursor: pointer;
+    white-space: nowrap;
+
+    ::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        background-color: #000;
+        opacity: 0;
+        transition: all 0.15s ease-in-out;
+    }
+
+    :hover {
+        transform: translateY(-1px);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+    }
+
+    :active {
+        transform: translateY(1px);
+        box-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
+        ::after {
+            opacity: 0.1;
+        }
+    }
+`;
+
+const colors = {
+    primary: css`
+        background-color: ${palette.green400};
+        color: ${palette.taupe100};
+    `,
+    secondary: css``,
+    discord: css`
+        background-color: ${palette.discord400};
+        border: 2px solid ${palette.discord200};
+    `,
+    muted: css`
+        border: 2px solid rgba(0, 0, 0, 0.15);
+        background: none;
+        :hover {
+            background-color: ${palette.taupe200};
+        }
+    `,
+};
+
+const sizes = {
+    small: css`
+        ${text300}
+
+        padding: 4px 8px;
+    `,
+    large: css`
+        ${text400}
+
+        padding: 12px 32px;
+        width: 100%;
+    `,
+};
+
+const modifiers = {
+    withIcon: css`
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    `,
+    withLoading: css`
+        pointer-events: none;
+    `,
+};
+
+export type ButtonComposerOptions = {
+    size: keyof typeof sizes;
+    color: keyof typeof colors;
+    modifiers?: Array<keyof typeof modifiers>;
+};
+
+export const Button = styled.button<ButtonComposerOptions>`
+    ${base}
+    ${(props) => props.size in sizes && sizes[props.size]}
+    ${(props) => props.color in colors && colors[props.color]}
+    ${(props) => props.modifiers?.map((m) => modifiers[m])}
+`;

packages/design-system/atoms/button/Button.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import {
+    Button as StyledButton,
+    ButtonComposerOptions,
+    IconContainer,
+} from './Button.styled';
+
+export type ButtonProps = Partial<ButtonComposerOptions> & {
+    children: React.ReactNode;
+    icon?: React.ReactNode;
+    loading?: boolean;
+    onClick?: () => void;
+    disabled?: boolean;
+};
+
+export const Button = (props: ButtonProps) => {
+    const modifiers: ButtonProps['modifiers'] = [];
+    if (props.loading) {
+        modifiers.push('withLoading');
+    }
+
+    if (props.icon) {
+        modifiers.push('withIcon');
+    }
+
+    return (
+        <StyledButton
+            size={props.size || 'large'}
+            color={props.color || 'primary'}
+            modifiers={modifiers}
+            onClick={props.onClick}
+            disabled={props.disabled}
+        >
+            {props.icon && <IconContainer>{props.icon}</IconContainer>}
+            <div>{props.children}</div>
+        </StyledButton>
+    );
+};

packages/design-system/atoms/button/index.ts

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