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/components/PathToDocument.tsx

@@ -0,0 +1,116 @@
+import { observer } from "mobx-react";
+import { GoToIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import { DocumentPath } from "~/stores/CollectionsStore";
+import Collection from "~/models/Collection";
+import Document from "~/models/Document";
+import CollectionIcon from "~/components/CollectionIcon";
+import Flex from "~/components/Flex";
+
+type Props = {
+  result: DocumentPath;
+  document?: Document | null | undefined;
+  collection: Collection | null | undefined;
+  onSuccess?: () => void;
+  style?: React.CSSProperties;
+  ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void;
+};
+
+@observer
+class PathToDocument extends React.Component<Props> {
+  handleClick = async (ev: React.SyntheticEvent) => {
+    ev.preventDefault();
+    const { document, result, onSuccess } = this.props;
+    if (!document) return;
+
+    if (result.type === "document") {
+      await document.move(result.collectionId, result.id);
+    } else {
+      await document.move(result.collectionId);
+    }
+
+    if (onSuccess) onSuccess();
+  };
+
+  render() {
+    const { result, collection, document, ref, style } = this.props;
+    const Component = document ? ResultWrapperLink : ResultWrapper;
+    if (!result) return <div />;
+
+    return (
+      // @ts-expect-error ts-migrate(2604) FIXME: JSX element type 'Component' does not have any con... Remove this comment to see the full error message
+      <Component
+        ref={ref}
+        onClick={this.handleClick}
+        href=""
+        style={style}
+        role="option"
+        selectable
+      >
+        {collection && <CollectionIcon collection={collection} />}
+        &nbsp;
+        {result.path
+          .map((doc) => <Title key={doc.id}>{doc.title}</Title>)
+          // @ts-expect-error ts-migrate(2739) FIXME: Type 'Element[]' is missing the following properti... Remove this comment to see the full error message
+          .reduce((prev, curr) => [prev, <StyledGoToIcon />, curr])}
+        {document && (
+          <DocumentTitle>
+            {" "}
+            <StyledGoToIcon /> <Title>{document.title}</Title>
+          </DocumentTitle>
+        )}
+      </Component>
+    );
+  }
+}
+
+const DocumentTitle = styled(Flex)``;
+
+const Title = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const StyledGoToIcon = styled(GoToIcon)`
+  fill: ${(props) => props.theme.divider};
+`;
+
+const ResultWrapper = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  user-select: none;
+
+  color: ${(props) => props.theme.text};
+  cursor: default;
+
+  svg {
+    flex-shrink: 0;
+  }
+`;
+
+const ResultWrapperLink = styled(ResultWrapper.withComponent("a"))`
+  padding: 8px 4px;
+
+  ${DocumentTitle} {
+    display: none;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: ${(props) => props.theme.listItemHoverBackground};
+    outline: none;
+
+    ${DocumentTitle} {
+      display: flex;
+    }
+  }
+`;
+
+export default PathToDocument;