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/editor-category/EditorCategory.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { mockCategory, roleCategory, roleCategory2 } from '../../fixtures/storyData';
+import { EditorCategory } from './EditorCategory';
+
+export default {
+    title: 'Molecules/Editor/Category',
+};
+
+export const CategoryEditor = () => {
+    const [categoryData, setCategoryData] = React.useState(mockCategory);
+    return (
+        <EditorCategory
+            category={categoryData}
+            onChange={(category) => setCategoryData(category)}
+            uncategorizedRoles={roleCategory}
+            guildRoles={[...roleCategory, ...roleCategory2]}
+        />
+    );
+};

packages/design-system/molecules/editor-category/EditorCategory.styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components';
+
+export const RoleContainer = styled.div`
+    display: flex;
+    margin: 10px;
+`;

packages/design-system/molecules/editor-category/EditorCategory.tsx

@@ -0,0 +1,145 @@
+import { FaderOpacity } from '@roleypoly/design-system/atoms/fader';
+import { HorizontalSwitch } from '@roleypoly/design-system/atoms/horizontal-switch';
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { TextInput, TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import { Text } from '@roleypoly/design-system/atoms/typography';
+import { RoleSearch } from '@roleypoly/design-system/molecules/role-search';
+import { Category, CategoryType, Role as RoleType } from '@roleypoly/types';
+import * as React from 'react';
+import { GoSearch } from 'react-icons/go';
+import { RoleContainer } from './EditorCategory.styled';
+
+type Props = {
+    category: Category;
+    uncategorizedRoles: RoleType[];
+    guildRoles: RoleType[];
+    onChange: (category: Category) => void;
+};
+
+const typeEnumToSwitch = (typeData: CategoryType) => {
+    if (typeData === CategoryType.Single) {
+        return 'Single';
+    } else {
+        return 'Multiple';
+    }
+};
+
+const switchToTypeEnum = (typeData: 'Single' | 'Multiple') => {
+    if (typeData === 'Single') {
+        return CategoryType.Single;
+    } else {
+        return CategoryType.Multi;
+    }
+};
+
+export const EditorCategory = (props: Props) => {
+    const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
+    const [roleSearchTerm, updateSearchTerm] = React.useState('');
+
+    const onUpdate = (
+        key: keyof typeof props.category,
+        pred?: (newValue: any) => any
+    ) => (newValue: any) => {
+        props.onChange({
+            ...props.category,
+            [key]: pred ? pred(newValue) : newValue,
+        });
+    };
+
+    const handleRoleSelect = (role: RoleType) => {
+        setRoleSearchPopoverActive(false);
+        updateSearchTerm('');
+        props.onChange({
+            ...props.category,
+            roles: [...props.category.roles, role.id],
+        });
+    };
+
+    const handleRoleDeselect = (role: RoleType) => () => {
+        props.onChange({
+            ...props.category,
+            roles: props.category.roles.filter((x) => x !== role.id),
+        });
+    };
+
+    return (
+        <div>
+            <Text>Category Name</Text>
+            <TextInput
+                placeholder="Pronouns, Political, Colors..."
+                value={props.category.name}
+                onChange={onUpdate('name', (x) => x.target.value)}
+            />
+
+            <Space />
+
+            <Text>Selection Type</Text>
+            <div>
+                <HorizontalSwitch
+                    items={['Multiple', 'Single']}
+                    value={typeEnumToSwitch(props.category.type)}
+                    onChange={onUpdate('type', switchToTypeEnum)}
+                />
+            </div>
+
+            <Space />
+
+            <Text>Visiblity</Text>
+            <div>
+                <HorizontalSwitch
+                    items={['Visible', 'Hidden']}
+                    value={props.category.hidden ? 'Hidden' : 'Visible'}
+                    onChange={onUpdate('hidden', (a) => a === 'Hidden')}
+                />
+            </div>
+
+            <Space />
+            <Text>Roles</Text>
+            <Popover
+                position={'top left'}
+                headContent={null}
+                active={roleSearchPopoverActive}
+                onExit={() => setRoleSearchPopoverActive(false)}
+            >
+                {() => (
+                    <RoleSearch
+                        placeholder={'Type or drag a role...'}
+                        roles={props.uncategorizedRoles}
+                        onSelect={handleRoleSelect}
+                        searchTerm={roleSearchTerm}
+                        onSearchUpdate={(newTerm) => updateSearchTerm(newTerm)}
+                    />
+                )}
+            </Popover>
+            <FaderOpacity isVisible={!roleSearchPopoverActive}>
+                <TextInputWithIcon
+                    icon={<GoSearch />}
+                    placeholder={'Type or drag a role...'}
+                    onFocus={() => setRoleSearchPopoverActive(true)}
+                    value={roleSearchTerm}
+                    onChange={(x) => updateSearchTerm(x.target.value)}
+                />
+                <RoleContainer>
+                    {props.category.roles.map((id) => {
+                        const role = props.guildRoles.find((x) => x.id === id);
+                        if (!role) {
+                            return <></>;
+                        }
+
+                        return (
+                            <Role
+                                role={role}
+                                selected={false}
+                                key={id}
+                                type="delete"
+                                onClick={handleRoleDeselect(role)}
+                            />
+                        );
+                    })}
+                </RoleContainer>
+            </FaderOpacity>
+        </div>
+    );
+};

packages/design-system/molecules/editor-category/index.ts

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