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

app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.tsx

@@ -1,19 +1,18 @@
-// @flow
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import CollectionGroupMembership from "models/CollectionGroupMembership";
-import Group from "models/Group";
-import GroupListItem from "components/GroupListItem";
-import InputSelect, { type Props as SelectProps } from "components/InputSelect";
-import CollectionGroupMemberMenu from "menus/CollectionGroupMemberMenu";
+import CollectionGroupMembership from "~/models/CollectionGroupMembership";
+import Group from "~/models/Group";
+import GroupListItem from "~/components/GroupListItem";
+import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
+import CollectionGroupMemberMenu from "~/menus/CollectionGroupMemberMenu";
 
-type Props = {|
-  group: Group,
-  collectionGroupMembership: ?CollectionGroupMembership,
-  onUpdate: (permission: string) => any,
-  onRemove: () => any,
-|};
+type Props = {
+  group: Group;
+  collectionGroupMembership: CollectionGroupMembership | null | undefined;
+  onUpdate: (permission: string) => void;
+  onRemove: () => void;
+};
 
 const CollectionGroupMemberListItem = ({
   group,
@@ -22,11 +21,16 @@ const CollectionGroupMemberListItem = ({
   onRemove,
 }: Props) => {
   const { t } = useTranslation();
-
   const PERMISSIONS = React.useMemo(
     () => [
-      { label: t("View only"), value: "read" },
-      { label: t("View and edit"), value: "read_write" },
+      {
+        label: t("View only"),
+        value: "read",
+      },
+      {
+        label: t("View and edit"),
+        value: "read_write",
+      },
     ],
     [t]
   );
@@ -34,8 +38,6 @@ const CollectionGroupMemberListItem = ({
   return (
     <GroupListItem
       group={group}
-      onRemove={onRemove}
-      onUpdate={onUpdate}
       showAvatar
       renderActions={({ openMembersModal }) => (
         <>
@@ -67,7 +69,7 @@ const Spacer = styled.div`
   width: 8px;
 `;
 
-const Select = (styled(InputSelect)`
+const Select = styled(InputSelect)`
   margin: 0;
   font-size: 14px;
   border-color: transparent;
@@ -75,6 +77,6 @@ const Select = (styled(InputSelect)`
   select {
     margin: 0;
   }
-`: React.ComponentType<SelectProps>);
+` as React.ComponentType<SelectProps>;
 
 export default CollectionGroupMemberListItem;

app/scenes/CollectionPermissions/components/MemberListItem.tsx

@@ -1,25 +1,24 @@
-// @flow
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Membership from "models/Membership";
-import User from "models/User";
-import Avatar from "components/Avatar";
-import Badge from "components/Badge";
-import Button from "components/Button";
-import Flex from "components/Flex";
-import InputSelect, { type Props as SelectProps } from "components/InputSelect";
-import ListItem from "components/List/Item";
-import Time from "components/Time";
-import MemberMenu from "menus/MemberMenu";
+import Membership from "~/models/Membership";
+import User from "~/models/User";
+import Avatar from "~/components/Avatar";
+import Badge from "~/components/Badge";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
+import ListItem from "~/components/List/Item";
+import Time from "~/components/Time";
+import MemberMenu from "~/menus/MemberMenu";
 
 type Props = {
-  user: User,
-  membership?: ?Membership,
-  canEdit: boolean,
-  onAdd?: () => any,
-  onRemove?: () => any,
-  onUpdate?: (permission: string) => any,
+  user: User;
+  membership?: Membership | null | undefined;
+  canEdit: boolean;
+  onAdd?: () => any;
+  onRemove?: () => any;
+  onUpdate?: (permission: string) => any;
 };
 
 const MemberListItem = ({
@@ -31,11 +30,16 @@ const MemberListItem = ({
   canEdit,
 }: Props) => {
   const { t } = useTranslation();
-
   const PERMISSIONS = React.useMemo(
     () => [
-      { label: t("View only"), value: "read" },
-      { label: t("View and edit"), value: "read_write" },
+      {
+        label: t("View only"),
+        value: "read",
+      },
+      {
+        label: t("View and edit"),
+        value: "read_write",
+      },
     ],
     [t]
   );
@@ -92,7 +96,7 @@ const Spacer = styled.div`
   width: 8px;
 `;
 
-const Select = (styled(InputSelect)`
+const Select = styled(InputSelect)`
   margin: 0;
   font-size: 14px;
   border-color: transparent;
@@ -100,6 +104,6 @@ const Select = (styled(InputSelect)`
   select {
     margin: 0;
   }
-`: React.ComponentType<SelectProps>);
+` as React.ComponentType<SelectProps>;
 
 export default MemberListItem;

app/scenes/CollectionPermissions/components/UserListItem.tsx

@@ -1,18 +1,17 @@
-// @flow
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import User from "models/User";
-import Avatar from "components/Avatar";
-import Badge from "components/Badge";
-import Button from "components/Button";
-import ListItem from "components/List/Item";
-import Time from "components/Time";
+import User from "~/models/User";
+import Avatar from "~/components/Avatar";
+import Badge from "~/components/Badge";
+import Button from "~/components/Button";
+import ListItem from "~/components/List/Item";
+import Time from "~/components/Time";
 
 type Props = {
-  user: User,
-  canEdit: boolean,
-  onAdd: () => any,
+  user: User;
+  canEdit: boolean;
+  onAdd: () => any;
 };
 
 const UserListItem = ({ user, onAdd, canEdit }: Props) => {