chore: Move to Typescript (#2783)

This PR moves the entire project to Typescript. Due to the ~1000 ignores this will lead to a messy codebase for a while, but the churn is worth it – all of those ignore comments are places that were never type-safe previously.

closes #1282

server/emails/CollectionNotificationEmail.tsx

@@ -1,6 +1,5 @@
-// @flow
 import * as React from "react";
-import { User, Collection } from "../models";
+import { User, Collection } from "@server/models";
 import Body from "./components/Body";
 import Button from "./components/Button";
 import EmailTemplate from "./components/EmailLayout";
@@ -10,10 +9,12 @@ import Header from "./components/Header";
 import Heading from "./components/Heading";
 
 export type Props = {
-  actor: User,
-  collection: Collection,
-  eventName: string,
-  unsubscribeUrl: string,
+  // @ts-expect-error ts-migrate(2749) FIXME: 'User' refers to a value, but is being used as a t... Remove this comment to see the full error message
+  actor: User;
+  // @ts-expect-error ts-migrate(2749) FIXME: 'Collection' refers to a value, but is being used ... Remove this comment to see the full error message
+  collection: Collection;
+  eventName: string;
+  unsubscribeUrl: string;
 };
 
 export const collectionNotificationEmailText = ({

server/emails/DocumentNotificationEmail.tsx

@@ -1,6 +1,5 @@
-// @flow
 import * as React from "react";
-import { User, Document, Team, Collection } from "../models";
+import { User, Document, Team, Collection } from "@server/models";
 import Body from "./components/Body";
 import Button from "./components/Button";
 import EmailTemplate from "./components/EmailLayout";
@@ -10,12 +9,15 @@ import Header from "./components/Header";
 import Heading from "./components/Heading";
 
 export type Props = {
-  actor: User,
-  team: Team,
-  document: Document,
-  collection: Collection,
-  eventName: string,
-  unsubscribeUrl: string,
+  // @ts-expect-error ts-migrate(2749) FIXME: 'User' refers to a value, but is being used as a t... Remove this comment to see the full error message
+  actor: User;
+  // @ts-expect-error ts-migrate(2749) FIXME: 'Team' refers to a value, but is being used as a t... Remove this comment to see the full error message
+  team: Team;
+  document: any;
+  // @ts-expect-error ts-migrate(2749) FIXME: 'Collection' refers to a value, but is being used ... Remove this comment to see the full error message
+  collection: Collection;
+  eventName: string;
+  unsubscribeUrl: string;
 };
 
 export const documentNotificationEmailText = ({

server/emails/ExportFailureEmail.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Body from "./components/Body";
 import Button from "./components/Button";

server/emails/ExportSuccessEmail.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Body from "./components/Body";
 import Button from "./components/Button";
@@ -18,8 +17,8 @@ export const ExportSuccessEmail = ({
   id,
   teamUrl,
 }: {
-  id: string,
-  teamUrl: string,
+  id: string;
+  teamUrl: string;
 }) => {
   return (
     <EmailTemplate>

server/emails/InviteEmail.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Body from "./components/Body";
 import Button from "./components/Button";
@@ -9,11 +8,11 @@ import Header from "./components/Header";
 import Heading from "./components/Heading";
 
 export type Props = {
-  name: string,
-  actorName: string,
-  actorEmail: string,
-  teamName: string,
-  teamUrl: string,
+  name: string;
+  actorName: string;
+  actorEmail: string;
+  teamName: string;
+  teamUrl: string;
 };
 
 export const inviteEmailText = ({

server/emails/SigninEmail.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Body from "./components/Body";
 import Button from "./components/Button";
@@ -9,8 +8,8 @@ import Header from "./components/Header";
 import Heading from "./components/Heading";
 
 export type Props = {
-  token: string,
-  teamUrl: string,
+  token: string;
+  teamUrl: string;
 };
 
 export const signinEmailText = ({ token, teamUrl }: Props) => `

server/emails/WelcomeEmail.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import Body from "./components/Body";
 import Button from "./components/Button";
@@ -9,7 +8,7 @@ import Header from "./components/Header";
 import Heading from "./components/Heading";
 
 export type Props = {
-  teamUrl: string,
+  teamUrl: string;
 };
 
 export const welcomeEmailText = ({ teamUrl }: Props) => `

server/emails/components/Body.tsx

@@ -1,11 +1,9 @@
-// @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
-
 import EmptySpace from "./EmptySpace";
 
 type Props = {
-  children: React.Node,
+  children: React.ReactNode;
 };
 
 export default ({ children }: Props) => {

server/emails/components/Button.tsx

@@ -1,7 +1,9 @@
-// @flow
 import * as React from "react";
 
-type Props = { href: string, children: React.Node };
+type Props = {
+  href: string;
+  children: React.ReactNode;
+};
 
 export default (props: Props) => {
   const style = {
@@ -14,7 +16,6 @@ export default (props: Props) => {
     textDecoration: "none",
     cursor: "pointer",
   };
-
   return (
     <a {...props} style={style}>
       {props.children}

server/emails/components/EmailLayout.tsx

@@ -1,10 +1,9 @@
-// @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
-import theme from "../../../shared/theme";
+import theme from "@shared/theme";
 
 type Props = {
-  children: React.Node,
+  children: React.ReactNode;
 };
 
 export default (props: Props) => (

server/emails/components/EmptySpace.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 
@@ -9,7 +8,6 @@ const EmptySpace = ({ height }: { height?: number }) => {
     fontSize: "1px",
     msoLineHeightRule: "exactly",
   };
-
   return (
     <Table width="100%">
       <TBody>
@@ -18,7 +16,9 @@ const EmptySpace = ({ height }: { height?: number }) => {
             width="100%"
             height={`${height}px`}
             style={style}
-            dangerouslySetInnerHTML={{ __html: "&nbsp;" }}
+            dangerouslySetInnerHTML={{
+              __html: "&nbsp;",
+            }}
           />
         </TR>
       </TBody>

server/emails/components/Footer.tsx

@@ -1,11 +1,10 @@
-// @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
-import theme from "../../../shared/theme";
-import { twitterUrl } from "../../../shared/utils/routeHelpers";
+import theme from "@shared/theme";
+import { twitterUrl } from "@shared/utils/routeHelpers";
 
 type Props = {
-  unsubscribeUrl?: string,
+  unsubscribeUrl?: string;
 };
 
 export default ({ unsubscribeUrl }: Props) => {
@@ -15,26 +14,22 @@ export default ({ unsubscribeUrl }: Props) => {
     color: theme.slate,
     fontSize: "14px",
   };
-
   const unsubStyle = {
     padding: "0",
     color: theme.slate,
     fontSize: "14px",
   };
-
   const linkStyle = {
     color: theme.slate,
     fontWeight: 500,
     textDecoration: "none",
     marginRight: "10px",
   };
-
   const externalLinkStyle = {
     color: theme.slate,
     textDecoration: "none",
     margin: "0 10px",
   };
-
   return (
     <Table width="100%">
       <TBody>

server/emails/components/Header.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { Table, TBody, TR, TD } from "oy-vey";
 import * as React from "react";
 import EmptySpace from "./EmptySpace";

server/emails/components/Heading.tsx

@@ -1,13 +1,11 @@
-// @flow
 import * as React from "react";
 
 const style = {
   fontWeight: 500,
   fontSize: "18px",
 };
-
 type Props = {
-  children: React.Node,
+  children: React.ReactNode;
 };
 
 export default ({ children }: Props) => (

server/emails/index.ts

@@ -1,4 +1,3 @@
-// @flow
 import Koa from "koa";
 import Router from "koa-router";
 import { NotFoundError } from "../errors";
@@ -9,8 +8,10 @@ const router = new Router();
 
 router.get("/:type/:format", async (ctx) => {
   let mailerOutput;
-  let mailer = new Mailer();
+  const mailer = new Mailer();
+
   mailer.transporter = {
+    // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'data' implicitly has an 'any' type.
     sendMail: (data) => (mailerOutput = data),
   };
 
@@ -20,20 +21,22 @@ router.get("/:type/:format", async (ctx) => {
     //   break;
     default:
       if (Object.getOwnPropertyNames(mailer).includes(ctx.params.type)) {
-        // $FlowIssue flow doesn't like this but we're ok with it
         mailer[ctx.params.type]("user@example.com");
-      } else throw new NotFoundError("Email template could not be found");
+      } else {
+        throw NotFoundError("Email template could not be found");
+      }
   }
 
   if (!mailerOutput) return;
 
   if (ctx.params.format === "text") {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'text' does not exist on type 'never'.
     ctx.body = mailerOutput.text;
   } else {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'html' does not exist on type 'never'.
     ctx.body = mailerOutput.html;
   }
 });
-
 emailPreviews.use(router.routes());
 
 export default emailPreviews;