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/role/Role.stories.tsx

@@ -0,0 +1,79 @@
+import { withColors } from '@roleypoly/design-system/atoms/colors/withColors';
+import * as React from 'react';
+import styled from 'styled-components';
+import { roleCategory } from '../../fixtures/storyData';
+import { Role as RoleComponent } from './Role';
+
+export default {
+    title: 'Atoms/Role',
+    component: RoleComponent,
+    decorators: [withColors],
+};
+
+const Demo = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+`;
+
+const RoleWithState = (props: any) => {
+    const [selected, updateSelected] = React.useState(false);
+    return (
+        <div style={{ padding: 5 }}>
+            <RoleComponent
+                {...props}
+                selected={selected}
+                onClick={(next) => updateSelected(next)}
+            />
+        </div>
+    );
+};
+
+export const Role = () => (
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleWithState key={idx} role={c} />
+        ))}
+    </Demo>
+);
+
+export const Selected = () => (
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent key={idx} role={c} selected={true} />
+        ))}
+    </Demo>
+);
+
+export const Unselected = () => (
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent key={idx} role={c} selected={false} />
+        ))}
+    </Demo>
+);
+
+export const DisabledByPosition = () => (
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent
+                key={idx}
+                role={{ ...c, safety: 1 }}
+                selected={false}
+                disabled
+            />
+        ))}
+    </Demo>
+);
+
+export const DisabledByDanger = () => (
+    <Demo>
+        {roleCategory.map((c, idx) => (
+            <RoleComponent
+                key={idx}
+                role={{ ...c, safety: 2 }}
+                selected={false}
+                disabled
+            />
+        ))}
+    </Demo>
+);