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/role-search/RoleSearch.tsx

@@ -0,0 +1,57 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import { Role as RoleType } from '@roleypoly/types';
+import Fuse from 'fuse.js';
+import * as React from 'react';
+import { GoSearch } from 'react-icons/go';
+import styled from 'styled-components';
+
+type Props = {
+    roles: RoleType[];
+    placeholder?: string;
+    onSelect: (role: RoleType) => void;
+    onSearchUpdate: (newTerm: string) => void;
+    searchTerm: string;
+};
+
+export const RoleSearch = (props: Props) => {
+    const fuse = new Fuse(props.roles, { includeScore: true, keys: ['name'] });
+    const results =
+        props.searchTerm !== ''
+            ? fuse.search(props.searchTerm)
+            : props.roles.map((role) => ({
+                  item: role,
+              }));
+
+    const handleClick = (role: RoleType) => () => {
+        props.onSelect(role);
+    };
+
+    return (
+        <div>
+            <TextInputWithIcon
+                icon={<GoSearch />}
+                placeholder={props.placeholder || 'Search or drag a role...'}
+                value={props.searchTerm}
+                onChange={(x) => props.onSearchUpdate(x.target.value)}
+            />
+            <Space />
+            {results.map((resultRole, idx) => (
+                <RoleInliner key={idx}>
+                    <Role
+                        selected={false}
+                        role={resultRole.item}
+                        onClick={handleClick(resultRole.item)}
+                        key={`${idx}role`}
+                    />
+                </RoleInliner>
+            ))}
+        </div>
+    );
+};
+
+const RoleInliner = styled.div`
+    display: flex;
+    margin: 5px 0;
+`;