big overhaul (#474)

* miniflare init

* feat(api): add tests

* chore: more tests, almost 100%

* add sessions/state spec

* add majority of routes and datapaths, start on interactions

* nevermind, no interactions

* nevermind x2, tweetnacl is bad but SubtleCrypto has what we need apparently

* simplify interactions verify

* add brute force interactions tests

* every primary path API route is refactored!

* automatically import from legacy, or die trying.

* check that we only fetch legacy once, ever

* remove old-src, same some historic pieces

* remove interactions & worker-utils package, update misc/types

* update some packages we don't need specific pinning for anymore

* update web references to API routes since they all changed

* fix all linting issues, upgrade most packages

* fix tests, divorce enzyme where-ever possible

* update web, fix integration issues

* pre-build api

* fix tests

* move api pretest to api package.json instead of CI

* remove interactions from terraform, fix deploy side configs

* update to tf 1.1.4

* prevent double writes to worker in GCS, port to newer GCP auth workflow

* fix api.tf var refs, upgrade node action

* change to curl-based script upload for worker script due to terraform provider limitations

* oh no, cloudflare freaked out :(

packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts

@@ -3,7 +3,7 @@ import styled, { keyframes } from 'styled-components';
 
 export const Base = styled.div`
   background-color: ${palette.discord100};
-  border: solid 1px rgba(0, 0, 0, 0.15);
+  border: solid 1px rgb(0 0 0 / 15%);
   border-radius: 3px;
   padding: 10px;
   user-select: none;
@@ -12,7 +12,7 @@ export const Base = styled.div`
 export const Timestamp = styled.span`
   padding: 0 5px;
   font-size: 0.7em;
-  opacity: 0.3;
+  opacity: 30%;
 `;
 
 export const TextParts = styled.span`
@@ -35,19 +35,19 @@ export const InputBox = styled.div`
 
 const lineBlink = keyframes`
     0% {
-        opacity: 1;
+        opacity: 100%;
     }
 
     40% {
-        opacity: 1;
+        opacity: 100%;
     }
 
     60% {
-        opacity: 0;
+        opacity: 0%;
     }
 
     100% {
-        opacity: 0;
+        opacity: 0%;
     }
 `;
 

packages/design-system/molecules/demo-picker/DemoPicker.tsx

@@ -19,11 +19,9 @@ const RoleWrap = styled.div`
 `;
 
 export const DemoPicker = () => {
-  const [selectedStates, setSelectedStates] = React.useState<
-    {
-      [key in RPCRole['id']]: boolean;
-    }
-  >(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {}));
+  const [selectedStates, setSelectedStates] = React.useState<{
+    [key in RPCRole['id']]: boolean;
+  }>(demoData.reduce((acc, role) => ({ ...acc, [role.id]: false }), {}));
 
   return (
     <Container>

packages/design-system/molecules/editable-role-list/EditableRoleList.styled.ts

@@ -24,7 +24,7 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
   &:hover {
     background-color: ${palette.taupe100};
     transform: translateY(-2px);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
   }
 
   &:active {
@@ -39,5 +39,5 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
         `
       : css`
           width: 32px;
-        `};
+        `}
 `;

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

@@ -40,7 +40,7 @@ export const Section = styled.div<{ big?: boolean; actions?: boolean }>`
     props.actions &&
     css`
       display: flex;
-    `};
+    `}
 `;
 
 export const RoleContainer = styled.div`
@@ -65,7 +65,7 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
   &:hover {
     background-color: ${palette.taupe100};
     transform: translateY(-2px);
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
   }
 
   &:active {
@@ -80,5 +80,5 @@ export const AddRoleButton = styled.div<{ long?: boolean }>`
         `
       : css`
           width: 32px;
-        `};
+        `}
 `;

packages/design-system/molecules/footer/Footer.styled.ts

@@ -19,12 +19,12 @@ export const FooterWrapper = styled.div`
 `;
 
 export const HoverColor = styled.div`
-  opacity: 0.3;
+  opacity: 30%;
   filter: saturate(0);
   transition: all ${transitions.in2in}s ease-in-out;
 
   &:hover {
-    opacity: 1;
+    opacity: 100%;
     filter: none;
   }
 `;

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

@@ -75,11 +75,11 @@ export const CardBase = styled.div`
   box-sizing: border-box;
   max-width: 98vw;
   :hover {
-    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 2px 2px rgb(0 0 0 / 25%);
     transform: translate(0, -1px);
   }
   :active {
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
     transform: translate(0);
   }
 

packages/design-system/molecules/server-utilities/ServerUtilities.styled.ts

@@ -20,7 +20,7 @@ export const ClickaleBlock = styled.a`
 `;
 
 export const Title = styled.div`
-  ${text400};
+  ${text400}
 
   svg {
     color: ${palette.taupe500};
@@ -30,7 +30,7 @@ export const Title = styled.div`
 `;
 
 export const Description = styled.div`
-  ${text200};
+  ${text200}
 `;
 
 export const MainSide = styled.div``;

packages/design-system/molecules/server-utilities/ServerUtilities.tsx

@@ -6,7 +6,7 @@ import {
 } from '@roleypoly/design-system/molecules/server-utilities/ServerUtilities.styled';
 import { hasFeature } from '@roleypoly/misc-utils/hasFeature';
 import { Features, GuildData } from '@roleypoly/types';
-import { GoArchive, GoChevronRight, GoReport, GoShield, GoSync } from 'react-icons/go';
+import { GoArchive, GoChevronRight, GoReport, GoShield } from 'react-icons/go';
 
 type Props = {
   guildData: GuildData;
@@ -54,25 +54,17 @@ export const ServerUtilities = (props: Props) => (
         link={`/s/${props.guildData.id}/edit/audit-logging`}
       />
     )}
-    <Utility
-      title={
-        <>
-          <GoSync />
-          &nbsp;&nbsp;Import from Roleypoly Legacy
-        </>
-      }
-      description="Used Roleypoly before and don't see your categories?"
-      link={`/s/${props.guildData.id}/edit/import-from-legacy`}
-    />
-    <Utility
-      title={
-        <>
-          <GoArchive />
-          &nbsp;&nbsp;Manage your Data
-        </>
-      }
-      description="Export or delete all of your Roleypoly data."
-      link={`/s/${props.guildData.id}/edit/data`}
-    />
+    {hasFeature(props.guildData.features, Features.Preview) && (
+      <Utility
+        title={
+          <>
+            <GoArchive />
+            &nbsp;&nbsp;Manage your Data
+          </>
+        }
+        description="Export or delete all of your Roleypoly data."
+        link={`/s/${props.guildData.id}/edit/data`}
+      />
+    )}
   </div>
 );