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
2025-05-07 01:02:36 +00:00 · 2021-03-12 18:04:49 -05:00 · 2021-03-12 18:04:49 -05:00 · 2ff6588030
commit 2ff6588030
parent 49e308507e
328 changed files with 16624 additions and 3525 deletions
--- a/packages/design-system/molecules/picker-category/PickerCategory.tsx
+++ b/packages/design-system/molecules/picker-category/PickerCategory.tsx
@ -0,0 +1,64 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { AmbientLarge, LargeText } from '@roleypoly/design-system/atoms/typography';
+import { sortBy } from '@roleypoly/misc-utils/sortBy';
+import { Category as RPCCategory, Role as RPCRole, RoleSafety } from '@roleypoly/types';
+import * as React from 'react';
+import ReactTooltip from 'react-tooltip';
+import styled from 'styled-components';
+import { Head, HeadSub, HeadTitle } from './PickerCategory.styled';
+
+export type CategoryProps = {
+    title: string;
+    roles: RPCRole[];
+    category: RPCCategory;
+    selectedRoles: string[];
+    onChange: (role: RPCRole) => (newState: boolean) => void;
+    type: 'single' | 'multi';
+} & (
+    | {
+          wikiMode: true;
+          roleWikiData: { [roleId: string]: string };
+      }
+    | {
+          wikiMode: false;
+      }
+);
+
+const Category = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+`;
+
+const Container = styled.div`
+    overflow: hidden;
+    padding: 5px;
+`;
+
+export const PickerCategory = (props: CategoryProps) => (
+    <div>
+        <Head>
+            <HeadTitle>
+                <LargeText>{props.title}</LargeText>
+            </HeadTitle>
+            {props.type === 'single' && (
+                <HeadSub>
+                    <AmbientLarge>Pick one</AmbientLarge>
+                </HeadSub>
+            )}
+        </Head>
+        <Category>
+            {sortBy(props.roles, 'position').map((role, idx) => (
+                <Container key={idx}>
+                    <Role
+                        role={role}
+                        selected={props.selectedRoles.includes(role.id)}
+                        onClick={props.onChange(role)}
+                        disabled={role.safety !== RoleSafety.Safe}
+                        tooltipId={props.category.id}
+                    />
+                </Container>
+            ))}
+        </Category>
+        <ReactTooltip id={props.category.id} />
+    </div>
+);