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

shared/embeds/components/Frame.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { OpenIcon } from "outline-icons";
@@ -7,32 +6,34 @@ import styled from "styled-components";
 
 // This wrapper allows us to pass non-standard HTML attributes through to the DOM element
 // https://www.styled-components.com/docs/basics#passed-props
+// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
 const Iframe = (props) => <iframe title="Embed" {...props} />;
 
 const StyledIframe = styled(Iframe)`
   border-radius: ${(props) => (props.$withBar ? "3px 3px 0 0" : "3px")};
   display: block;
 `;
-
 type Props = {
-  src?: string,
-  border?: boolean,
-  title?: string,
-  icon?: React.Node,
-  canonicalUrl?: string,
-  isSelected?: boolean,
-  width?: string,
-  height?: string,
+  src?: string;
+  border?: boolean;
+  title?: string;
+  icon?: React.ReactNode;
+  canonicalUrl?: string;
+  isSelected?: boolean;
+  width?: string;
+  height?: string;
 };
 
 type PropsWithRef = Props & {
-  forwardedRef: React.Ref<typeof StyledIframe>,
+  forwardedRef: React.Ref<typeof StyledIframe>;
 };
 
 @observer
 class Frame extends React.Component<PropsWithRef> {
   mounted: boolean;
-  @observable isLoaded: boolean = false;
+
+  @observable
+  isLoaded = false;
 
   componentDidMount() {
     this.mounted = true;
@@ -72,6 +73,7 @@ class Frame extends React.Component<PropsWithRef> {
       >
         {this.isLoaded && (
           <Component
+            // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
             ref={forwardedRef}
             $withBar={withBar}
             sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
@@ -86,7 +88,7 @@ class Frame extends React.Component<PropsWithRef> {
           />
         )}
         {withBar && (
-          <Bar align="center">
+          <Bar>
             {icon} <Title>{title}</Title>
             {canonicalUrl && (
               <Open
@@ -104,7 +106,11 @@ class Frame extends React.Component<PropsWithRef> {
   }
 }
 
-const Rounded = styled.div`
+const Rounded = styled.div<{
+  width: string;
+  height: string;
+  $withBar: boolean;
+}>`
   border: 1px solid ${(props) => props.theme.embedBorder};
   border-radius: 6px;
   overflow: hidden;
@@ -141,6 +147,7 @@ const Bar = styled.div`
   user-select: none;
 `;
 
-export default React.forwardRef<Props, typeof Frame>((props, ref) => (
+export default React.forwardRef((props, ref) => (
+  // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
   <Frame {...props} forwardedRef={ref} />
 ));

shared/embeds/components/Image.tsx

@@ -1,14 +1,13 @@
-// @flow
 import * as React from "react";
 import { cdnPath } from "../../utils/urls";
 
-type Props = {|
-  alt: string,
-  src: string,
-  title?: string,
-  width?: number,
-  height?: number,
-|};
+type Props = {
+  alt: string;
+  src: string;
+  title?: string;
+  width?: number;
+  height?: number;
+};
 
 export default function Image({ src, alt, ...rest }: Props) {
   return <img src={cdnPath(src)} alt={alt} {...rest} />;