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/server-listing-card/ServerListingCard.stories.tsx

@@ -0,0 +1,12 @@
+import { roleypolyGuild } from '../../fixtures/storyData';
+import { ServerListingCard } from './ServerListingCard';
+
+export default {
+    title: 'Molecules/Server Listing Card',
+    component: ServerListingCard,
+    args: {
+        guild: { ...roleypolyGuild, permissionLevel: 4 },
+    },
+};
+
+export const serverListingCard = (args) => <ServerListingCard {...args} />;

packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts

@@ -0,0 +1,90 @@
+import { onSmallScreen, onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { text200, text500 } from '@roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
+
+export const CardLine = styled.div<{ left?: boolean }>`
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    padding: 5px;
+    box-sizing: border-box;
+    ${(props) =>
+        props.left &&
+        css`
+            flex: 1;
+            justify-content: flex-end;
+            align-items: flex-end;
+        `}
+`;
+
+export const MaxWidthTitle = styled.div`
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+
+export const PermissionTagStyled = styled.div<{ hiddenOnSmall?: boolean }>`
+    ${text200}
+
+    display: inline-block;
+    background-color: ${palette.taupe200};
+    padding: 4px 6px;
+    border-radius: 2px;
+
+    svg {
+        position: relative;
+        top: 1px;
+        ${onTablet(
+            css`
+                margin-right: 2px;
+            `
+        )}
+    }
+
+    ${(props) =>
+        props.hiddenOnSmall &&
+        onSmallScreen(
+            css`
+                display: none;
+            `
+        )}
+`;
+
+export const CardBase = styled.div`
+    ${text500}
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: ${palette.taupe300};
+    overflow-x: hidden;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    user-select: none;
+    transform: translate(0);
+    transition: transform ease-in-out ${transitions.actionable}s,
+        box-shadow ease-in-out ${transitions.actionable}s,
+        border-color ease-in-out ${transitions.out2in}s;
+    box-sizing: border-box;
+    max-width: 98vw;
+    :hover {
+        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+        transform: translate(0, -1px);
+    }
+    :active {
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+        transform: translate(0);
+    }
+
+    ${onTablet(css`
+        flex-direction: column;
+        justify-content: left;
+    `)}
+`;

packages/design-system/molecules/server-listing-card/ServerListingCard.tsx

@@ -0,0 +1,58 @@
+import { Avatar, utils } from '@roleypoly/design-system/atoms/avatar';
+import { Collapse } from '@roleypoly/design-system/atoms/collapse';
+import { GuildSlug, UserGuildPermissions } from '@roleypoly/types';
+import * as React from 'react';
+import { GoPerson, GoStar, GoZap } from 'react-icons/go';
+import {
+    CardBase,
+    CardLine,
+    MaxWidthTitle,
+    PermissionTagStyled,
+} from './ServerListingCard.styled';
+
+type ServerListingProps = {
+    guild: GuildSlug;
+};
+
+export const ServerListingCard = (props: ServerListingProps) => (
+    <CardBase>
+        <CardLine>
+            <Avatar
+                hash={props.guild.icon}
+                src={utils.avatarHash(props.guild.id, props.guild.icon, 'icons')}
+            >
+                {utils.initialsFromName(props.guild.name)}
+            </Avatar>
+        </CardLine>
+        <MaxWidthTitle>{props.guild.name}</MaxWidthTitle>
+        <CardLine left>
+            <PermissionTag permissionLevel={props.guild.permissionLevel} />
+        </CardLine>
+    </CardBase>
+);
+
+const PermissionTag = (props: { permissionLevel: UserGuildPermissions }) => {
+    switch (props.permissionLevel) {
+        case UserGuildPermissions.Admin:
+            return (
+                <PermissionTagStyled>
+                    <GoStar />
+                    <Collapse>Administrator</Collapse>
+                </PermissionTagStyled>
+            );
+        case UserGuildPermissions.Manager:
+            return (
+                <PermissionTagStyled>
+                    <GoZap />
+                    <Collapse>Role Manager</Collapse>
+                </PermissionTagStyled>
+            );
+        default:
+            return (
+                <PermissionTagStyled hiddenOnSmall>
+                    <GoPerson />
+                    <Collapse>Member</Collapse>
+                </PermissionTagStyled>
+            );
+    }
+};

packages/design-system/molecules/server-listing-card/index.ts

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