wip

.babelrc

@@ -2,6 +2,7 @@
   "presets": [
     "@babel/preset-react",
     "@babel/preset-flow",
+    "@babel/preset-typescript",
     [
       "@babel/preset-env",
       {

.eslintrc

@@ -4,12 +4,11 @@
     "react-app",
     "plugin:import/errors",
     "plugin:import/warnings",
-    "plugin:flowtype/recommended",
+    "plugin:import/typescript",
     "plugin:react-hooks/recommended"
   ],
   "plugins": [
-    "prettier",
-    "flowtype"
+    "prettier"
   ],
   "rules": {
     "eqeqeq": 2,
@@ -55,21 +54,6 @@
         ]
       }
     ],
-    "flowtype/require-valid-file-annotation": [
-      2,
-      "always",
-      {
-        "annotationStyle": "line"
-      }
-    ],
-    "flowtype/space-after-type-colon": [
-      2,
-      "always"
-    ],
-    "flowtype/space-before-type-colon": [
-      2,
-      "never"
-    ],
     "prettier/prettier": [
       "error",
       {
@@ -84,16 +68,22 @@
       "pragma": "React",
       "version": "detect"
     },
+    "import/parsers": {
+      "@typescript-eslint/parser": [
+        ".ts",
+        ".tsx"
+      ]
+    },
     "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      },
       "node": {
         "paths": [
           "app",
           "."
         ]
       }
-    },
-    "flowtype": {
-      "onlyFilesWithFlowAnnotation": false
     }
   },
   "env": {

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "javascript.validate.enable": false,
   "javascript.format.enable": false,
-  "typescript.validate.enable": false,
-  "typescript.format.enable": false,
+  "typescript.validate.enable": true,
+  "typescript.format.enable": true,
   "editor.formatOnSave": true,
 }

app/components/Actions.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "components/Flex";

app/components/Analytics.ts

@@ -1,10 +1,9 @@
-// @flow
 /* global ga */
 import * as React from "react";
 import env from "env";
 
 type Props = {
-  children?: React.Node,
+  children?: React.ReactNode;
 };
 
 export default class Analytics extends React.Component<Props> {

app/components/Arrow.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 
 export default function Arrow() {

app/components/AuthLogo/GoogleLogo.tsx

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number,
-  fill?: string,
-  className?: string,
+  size?: number;
+  fill?: string;
+  className?: string;
 };
 
 function GoogleLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/AuthLogo/MicrosoftLogo.tsx

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number,
-  fill?: string,
-  className?: string,
+  size?: number;
+  fill?: string;
+  className?: string;
 };
 
 function MicrosoftLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/AuthLogo/SlackLogo.tsx

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number,
-  fill?: string,
-  className?: string,
+  size?: number;
+  fill?: string;
+  className?: string;
 };
 
 function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/AuthLogo/index.tsx

@@ -1,14 +1,13 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import GoogleLogo from "./GoogleLogo";
 import MicrosoftLogo from "./MicrosoftLogo";
 import SlackLogo from "./SlackLogo";
 
-type Props = {|
-  providerName: string,
-  size?: number,
-|};
+type Props = {
+  providerName: string;
+  size?: number;
+};
 
 function AuthLogo({ providerName, size = 16 }: Props) {
   switch (providerName) {

app/components/Authenticated.tsx

@@ -1,15 +1,14 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 import { isCustomSubdomain } from "shared/utils/domains";
 import LoadingIndicator from "components/LoadingIndicator";
-import useStores from "../hooks/useStores";
 import env from "env";
+import useStores from "hooks/useStores";
 
 type Props = {
-  children: React.Node,
+  children: JSX.Element;
 };
 
 const Authenticated = ({ children }: Props) => {

app/components/Avatar/Avatar.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -6,18 +5,19 @@ import styled from "styled-components";
 import User from "models/User";
 import placeholder from "./placeholder.png";
 
-type Props = {|
-  src: string,
-  size: number,
-  icon?: React.Node,
-  user?: User,
-  onClick?: () => void,
-  className?: string,
-|};
+type Props = {
+  src: string;
+  size: number;
+  icon?: React.ReactNode;
+  user?: User;
+  onClick?: () => void;
+  className?: string;
+};
 
 @observer
 class Avatar extends React.Component<Props> {
-  @observable error: boolean;
+  @observable
+  error: boolean;
 
   static defaultProps = {
     size: 24,

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,9 +1,9 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { EditIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { withTranslation } from "react-i18next";
+import { TFunction } from "react-i18next";
 import styled from "styled-components";
 import User from "models/User";
 import UserProfile from "scenes/UserProfile";
@@ -11,17 +11,18 @@ import Avatar from "components/Avatar";
 import Tooltip from "components/Tooltip";
 
 type Props = {
-  user: User,
-  isPresent: boolean,
-  isEditing: boolean,
-  isCurrentUser: boolean,
-  profileOnClick: boolean,
-  t: TFunction,
+  user: User;
+  isPresent: boolean;
+  isEditing: boolean;
+  isCurrentUser: boolean;
+  profileOnClick: boolean;
+  t: TFunction;
 };
 
 @observer
 class AvatarWithPresence extends React.Component<Props> {
-  @observable isOpen: boolean = false;
+  @observable
+  isOpen: boolean = false;
 
   handleOpenProfile = () => {
     this.isOpen = true;

app/components/Avatar/index.ts

@@ -1,4 +1,3 @@
-// @flow
 import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
 

app/components/Badge.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Badge = styled.span`

app/components/Branding.tsx

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import OutlineLogo from "./OutlineLogo";
 import env from "env";
 
 type Props = {
-  href?: string,
+  href?: string;
 };
 
 function Branding({ href = env.URL }: Props) {

app/components/Breadcrumb.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { GoToIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
@@ -6,18 +5,18 @@ import styled from "styled-components";
 import Flex from "components/Flex";
 import BreadcrumbMenu from "menus/BreadcrumbMenu";
 
-type MenuItem = {|
-  icon?: React.Node,
-  title: React.Node,
-  to?: string,
-|};
+type MenuItem = {
+  icon?: React.ReactNode;
+  title: React.ReactNode;
+  to?: string;
+};
 
-type Props = {|
-  items: MenuItem[],
-  max?: number,
-  children?: React.Node,
-  highlightFirstItem?: boolean,
-|};
+type Props = {
+  items: MenuItem[];
+  max?: number;
+  children?: React.ReactNode;
+  highlightFirstItem?: boolean;
+};
 
 function Breadcrumb({ items, highlightFirstItem, children, max = 2 }: Props) {
   const totalItems = items.length;

app/components/Bubble.tsx

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import { bounceIn } from "shared/styles/animations";
 
-type Props = {|
-  count: number,
-|};
+type Props = {
+  count: number;
+};
 
 const Bubble = ({ count }: Props) => {
   if (!count) {

app/components/Button.tsx

@@ -1,7 +1,7 @@
-// @flow
 import { ExpandedIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
+import { SyntheticEvent } from "react";
 import styled from "styled-components";
 
 const RealButton = styled.button`
@@ -108,36 +108,35 @@ export const Inner = styled.span`
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
-export type Props = {|
-  type?: "button" | "submit",
-  value?: string,
-  icon?: React.Node,
-  iconColor?: string,
-  className?: string,
-  children?: React.Node,
-  innerRef?: React.ElementRef<any>,
-  disclosure?: boolean,
-  neutral?: boolean,
-  danger?: boolean,
-  primary?: boolean,
-  disabled?: boolean,
-  fullwidth?: boolean,
-  autoFocus?: boolean,
-  style?: Object,
-  as?: React.ComponentType<any>,
-  to?: string,
-  onClick?: (event: SyntheticEvent<>) => mixed,
-  borderOnHover?: boolean,
+export type Props = {
+  type?: "button" | "submit";
+  value?: string;
+  icon?: React.ReactNode;
+  iconColor?: string;
+  className?: string;
+  children?: React.ReactNode;
+  innerRef?: React.RefObject<any>;
+  disclosure?: boolean;
+  neutral?: boolean;
+  danger?: boolean;
+  primary?: boolean;
+  disabled?: boolean;
+  fullwidth?: boolean;
+  autoFocus?: boolean;
+  style?: any;
+  as?: React.ComponentType<any>;
+  to?: string;
+  onClick?: (event: SyntheticEvent) => unknown;
+  borderOnHover?: boolean;
+  "data-on"?: string;
+  "data-event-category"?: string;
+  "data-event-action"?: string;
+};
 
-  "data-on"?: string,
-  "data-event-category"?: string,
-  "data-event-action"?: string,
-|};
-
-const Button = React.forwardRef<Props, HTMLButtonElement>(
+const Button = React.forwardRef<HTMLButtonElement>(
   (
     {
-      type = "text",
+      type = "button",
       icon,
       children,
       value,

app/components/ButtonLarge.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 import Button, { Inner } from "./Button";
 

app/components/ButtonLink.tsx

@@ -1,17 +1,13 @@
-// @flow
 import * as React from "react";
+import { SyntheticEvent } from "react";
 import styled from "styled-components";
 
 type Props = {
-  onClick: (ev: SyntheticEvent<>) => void,
-  children: React.Node,
+  onClick: (ev: SyntheticEvent) => void;
+  children: React.ReactNode;
 };
 
-export default function ButtonLink(props: Props) {
-  return <Button {...props} />;
-}
-
-const Button = styled.button`
+const ButtonLink = styled.button<Props>`
   margin: 0;
   padding: 0;
   border: 0;
@@ -21,3 +17,5 @@ const Button = styled.button`
   text-decoration: none;
   cursor: pointer;
 `;
+
+export default ButtonLink;

app/components/CenteredContent.tsx

@@ -1,14 +1,13 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 
-type Props = {|
-  children?: React.Node,
-  withStickyHeader?: boolean,
-|};
+type Props = {
+  children?: React.ReactNode;
+  withStickyHeader?: boolean;
+};
 
-const Container = styled.div`
+const Container = styled.div<Props>`
   width: 100%;
   max-width: 100vw;
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};

app/components/Checkbox.tsx

@@ -1,29 +1,33 @@
-// @flow
 import * as React from "react";
+import { ChangeEvent } from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import HelpText from "components/HelpText";
 
-export type Props = {|
-  checked?: boolean,
-  label?: React.Node,
-  labelHidden?: boolean,
-  className?: string,
-  name?: string,
-  disabled?: boolean,
-  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  note?: string,
-  short?: boolean,
-  small?: boolean,
-|};
+export type Props = {
+  checked?: boolean;
+  label?: React.ReactNode;
+  labelHidden?: boolean;
+  className?: string;
+  name?: string;
+  disabled?: boolean;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => unknown;
+  note?: string;
+  short?: boolean;
+  small?: boolean;
+};
 
-const LabelText = styled.span`
+type LabelTextProps = { small: boolean };
+
+const LabelText = styled.span<LabelTextProps>`
   font-weight: 500;
   margin-left: ${(props) => (props.small ? "6px" : "10px")};
   ${(props) => (props.small ? `color: ${props.theme.textSecondary}` : "")};
 `;
 
-const Wrapper = styled.div`
+type WrapperProps = { small: boolean };
+
+const Wrapper = styled.div<WrapperProps>`
   padding-bottom: 8px;
   ${(props) => (props.small ? "font-size: 14px" : "")};
   width: 100%;

app/components/ClickablePadding.ts

@@ -1,7 +1,10 @@
-// @flow
 import styled from "styled-components";
 
-const ClickablePadding = styled.div`
+type Props = {
+  grow: boolean;
+};
+
+const ClickablePadding = styled.div<Props>`
   min-height: 10em;
   cursor: ${({ onClick }) => (onClick ? "text" : "default")};
   ${({ grow }) => grow && `flex-grow: 100;`};

app/components/Collaborators.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { sortBy, filter, uniq } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -14,10 +13,10 @@ import NudeButton from "components/NudeButton";
 import Popover from "components/Popover";
 import useStores from "hooks/useStores";
 
-type Props = {|
-  document: Document,
-  currentUserId: string,
-|};
+type Props = {
+  document: Document;
+  currentUserId: string;
+};
 
 function Collaborators(props: Props) {
   const { t } = useTranslation();

app/components/CollectionDescription.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
@@ -13,9 +12,9 @@ import NudeButton from "components/NudeButton";
 import useDebouncedCallback from "hooks/useDebouncedCallback";
 import useStores from "hooks/useStores";
 
-type Props = {|
-  collection: Collection,
-|};
+type Props = {
+  collection: Collection;
+};
 
 function CollectionDescription({ collection }: Props) {
   const { collections, ui, policies } = useStores();

app/components/CollectionIcon.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
@@ -8,9 +7,9 @@ import { icons } from "components/IconPicker";
 import useStores from "hooks/useStores";
 
 type Props = {
-  collection: Collection,
-  expanded?: boolean,
-  size?: number,
+  collection: Collection;
+  expanded?: boolean;
+  size?: number;
 };
 
 function ResolvedCollectionIcon({ collection, expanded, size }: Props) {

app/components/ContextMenu/Header.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Header = styled.h3`

app/components/ContextMenu/MenuItem.tsx

@@ -1,21 +1,22 @@
-// @flow
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 
-type Props = {|
-  onClick?: (SyntheticEvent<>) => void | Promise<void>,
-  children?: React.Node,
-  selected?: boolean,
-  disabled?: boolean,
-  to?: string,
-  href?: string,
-  target?: "_blank",
-  as?: string | React.ComponentType<*>,
-  hide?: () => void,
-|};
+import { SyntheticEvent } from "react";
+
+type Props = {
+  onClick?: (a: SyntheticEvent) => void | Promise<void>;
+  children?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  to?: string;
+  href?: string;
+  target?: "_blank";
+  as?: string | React.ComponentType<any>;
+  hide?: () => void;
+};
 
 const MenuItem = ({
   onClick,

app/components/ContextMenu/OverflowMenuButton.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { MoreIcon } from "outline-icons";
 import * as React from "react";
 import { MenuButton } from "reakit/Menu";

app/components/ContextMenu/Separator.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";

app/components/ContextMenu/Template.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { ExpandedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -13,49 +12,51 @@ import MenuItem, { MenuAnchor } from "./MenuItem";
 import Separator from "./Separator";
 import ContextMenu from ".";
 
-type TMenuItem =
-  | {|
-      title: React.Node,
-      to: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      onClick: (event: SyntheticEvent<>) => void | Promise<void>,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      href: string,
-      visible?: boolean,
-      selected?: boolean,
-      disabled?: boolean,
-    |}
-  | {|
-      title: React.Node,
-      visible?: boolean,
-      disabled?: boolean,
-      style?: Object,
-      hover?: boolean,
-      items: TMenuItem[],
-    |}
-  | {|
-      type: "separator",
-      visible?: boolean,
-    |}
-  | {|
-      type: "heading",
-      visible?: boolean,
-      title: React.Node,
-    |};
+import { SyntheticEvent } from "react";
 
-type Props = {|
-  items: TMenuItem[],
-|};
+type TMenuItem =
+  | {
+      title: React.ReactNode;
+      to: string;
+      visible?: boolean;
+      selected?: boolean;
+      disabled?: boolean;
+    }
+  | {
+      title: React.ReactNode;
+      onClick: (event: SyntheticEvent) => void | Promise<void>;
+      visible?: boolean;
+      selected?: boolean;
+      disabled?: boolean;
+    }
+  | {
+      title: React.ReactNode;
+      href: string;
+      visible?: boolean;
+      selected?: boolean;
+      disabled?: boolean;
+    }
+  | {
+      title: React.ReactNode;
+      visible?: boolean;
+      disabled?: boolean;
+      style?: any;
+      hover?: boolean;
+      items: TMenuItem[];
+    }
+  | {
+      type: "separator";
+      visible?: boolean;
+    }
+  | {
+      type: "heading";
+      visible?: boolean;
+      title: React.ReactNode;
+    };
+
+type Props = {
+  items: TMenuItem[];
+};
 
 const Disclosure = styled(ExpandedIcon)`
   transform: rotate(270deg);
@@ -83,7 +84,7 @@ const Submenu = React.forwardRef(({ templateItems, title, ...rest }, ref) => {
   );
 });
 
-function Template({ items, ...menu }: Props): React.Node {
+function Template({ items, ...menu }: Props): React.ReactNode {
   let filtered = items.filter((item) => item.visible !== false);
 
   // this block literally just trims unneccessary separators

app/components/ContextMenu/index.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
@@ -11,14 +10,14 @@ import {
 } from "shared/styles/animations";
 import usePrevious from "hooks/usePrevious";
 
-type Props = {|
-  "aria-label": string,
-  visible?: boolean,
-  animating?: boolean,
-  children: React.Node,
-  onOpen?: () => void,
-  onClose?: () => void,
-|};
+type Props = {
+  "aria-label": string;
+  visible?: boolean;
+  animating?: boolean;
+  children: React.ReactNode;
+  onOpen?: () => void;
+  onClose?: () => void;
+};
 
 export default function ContextMenu({
   children,

app/components/CopyToClipboard.ts

@@ -1,16 +1,17 @@
-// @flow
 import copy from "copy-to-clipboard";
 import * as React from "react";
 
+import { SyntheticEvent } from "react";
+
 type Props = {
-  text: string,
-  children?: React.Node,
-  onClick?: () => void,
-  onCopy: () => void,
+  text: string;
+  children?: React.ReactNode;
+  onClick?: () => void;
+  onCopy: () => void;
 };
 
 class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: SyntheticEvent<>) => {
+  onClick = (ev: SyntheticEvent) => {
     const { text, onCopy, children } = this.props;
     const elem = React.Children.only(children);
     copy(text, {

app/components/DelayedMount.ts

@@ -1,9 +1,8 @@
-// @flow
 import * as React from "react";
 
 type Props = {
-  delay?: number,
-  children: React.Node,
+  delay?: number;
+  children: JSX.Element;
 };
 
 export default function DelayedMount({ delay = 250, children }: Props) {

app/components/Divider.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Divider = styled.hr`

app/components/DocumentBreadcrumb.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import {
   ArchiveIcon,
@@ -16,11 +15,11 @@ import CollectionIcon from "components/CollectionIcon";
 import useStores from "hooks/useStores";
 import { collectionUrl } from "utils/routeHelpers";
 
-type Props = {|
-  document: Document,
-  children?: React.Node,
-  onlyText: boolean,
-|};
+type Props = {
+  document: Document;
+  children?: React.ReactNode;
+  onlyText: boolean;
+};
 
 function useCategory(document) {
   const { t } = useTranslation();

app/components/DocumentHistory/DocumentHistory.tsx

@@ -1,10 +1,10 @@
-// @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import { action, observable } from "mobx";
 import { inject, observer } from "mobx-react";
 import { CloseIcon } from "outline-icons";
 import * as React from "react";
-import { type Match, Redirect, type RouterHistory } from "react-router-dom";
+import { Redirect } from "react-router-dom";
+import { Match, RouterHistory } from "react-router-dom";
 import { Waypoint } from "react-waypoint";
 import styled from "styled-components";
 
@@ -20,19 +20,24 @@ import Revision from "./components/Revision";
 import { documentHistoryUrl, documentUrl } from "utils/routeHelpers";
 
 type Props = {
-  match: Match,
-  documents: DocumentsStore,
-  revisions: RevisionsStore,
-  history: RouterHistory,
+  match: Match;
+  documents: DocumentsStore;
+  revisions: RevisionsStore;
+  history: RouterHistory;
 };
 
 @observer
 class DocumentHistory extends React.Component<Props> {
-  @observable isLoaded: boolean = false;
-  @observable isFetching: boolean = false;
-  @observable offset: number = 0;
-  @observable allowLoadMore: boolean = true;
-  @observable redirectTo: ?string;
+  @observable
+  isLoaded: boolean = false;
+  @observable
+  isFetching: boolean = false;
+  @observable
+  offset: number = 0;
+  @observable
+  allowLoadMore: boolean = true;
+  @observable
+  redirectTo: string | undefined | null;
 
   async componentDidMount() {
     await this.loadMoreResults();

app/components/DocumentHistory/components/Revision.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { format } from "date-fns";
 import * as React from "react";
 import { NavLink } from "react-router-dom";
@@ -10,16 +9,16 @@ import Avatar from "components/Avatar";
 import Flex from "components/Flex";
 import Time from "components/Time";
 import RevisionMenu from "menus/RevisionMenu";
-import { type Theme } from "types";
+import { Theme } from "types";
 
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {
-  theme: Theme,
-  showMenu: boolean,
-  selected: boolean,
-  document: Document,
-  revision: Revision,
+  theme: Theme;
+  showMenu: boolean;
+  selected: boolean;
+  document: Document;
+  revision: Revision;
 };
 
 class RevisionListItem extends React.Component<Props> {

app/components/DocumentHistory/index.ts

@@ -1,3 +1,2 @@
-// @flow
 import DocumentHistory from "./DocumentHistory";
 export default DocumentHistory;

app/components/DocumentList.tsx

@@ -1,18 +1,17 @@
-// @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import * as React from "react";
 import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
 
-type Props = {|
-  documents: Document[],
-  limit?: number,
-  showCollection?: boolean,
-  showPublished?: boolean,
-  showPin?: boolean,
-  showDraft?: boolean,
-  showTemplate?: boolean,
-|};
+type Props = {
+  documents: Document[];
+  limit?: number;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  showPin?: boolean;
+  showDraft?: boolean;
+  showTemplate?: boolean;
+};
 
 export default function DocumentList({ limit, documents, ...rest }: Props) {
   const items = limit ? documents.splice(0, limit) : documents;

app/components/DocumentListItem.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
@@ -21,17 +20,17 @@ import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import { newDocumentUrl } from "utils/routeHelpers";
 
-type Props = {|
-  document: Document,
-  highlight?: ?string,
-  context?: ?string,
-  showNestedDocuments?: boolean,
-  showCollection?: boolean,
-  showPublished?: boolean,
-  showPin?: boolean,
-  showDraft?: boolean,
-  showTemplate?: boolean,
-|};
+type Props = {
+  document: Document;
+  highlight?: string | null;
+  context?: string | null;
+  showNestedDocuments?: boolean;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  showPin?: boolean;
+  showDraft?: boolean;
+  showTemplate?: boolean;
+};
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
 

app/components/DocumentMeta.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -29,15 +28,15 @@ const Modified = styled.span`
   font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;
 
-type Props = {|
-  showCollection?: boolean,
-  showPublished?: boolean,
-  showLastViewed?: boolean,
-  showNestedDocuments?: boolean,
-  document: Document,
-  children: React.Node,
-  to?: string,
-|};
+type Props = {
+  showCollection?: boolean;
+  showPublished?: boolean;
+  showLastViewed?: boolean;
+  showNestedDocuments?: boolean;
+  document: Document;
+  children: React.ReactNode;
+  to?: string;
+};
 
 function DocumentMeta({
   showPublished,

app/components/DocumentMetaWithViews.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { useObserver } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -8,14 +7,14 @@ import Document from "models/Document";
 import DocumentMeta from "components/DocumentMeta";
 import DocumentViews from "components/DocumentViews";
 import Popover from "components/Popover";
-import useStores from "../hooks/useStores";
+import useStores from "hooks/useStores";
 
-type Props = {|
-  document: Document,
-  isDraft: boolean,
-  to?: string,
-  rtl?: boolean,
-|};
+type Props = {
+  document: Document;
+  isDraft: boolean;
+  to?: string;
+  rtl?: boolean;
+};
 
 function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   const { views } = useStores();
@@ -62,7 +61,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   );
 }
 
-const Meta = styled(DocumentMeta)`
+const Meta = styled(DocumentMeta)<{ rtl: boolean }>`
   justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   margin: -12px 0 2em 0;
   font-size: 14px;

app/components/DocumentViews.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { formatDistanceToNow } from "date-fns";
 import { sortBy } from "lodash";
 import { observer } from "mobx-react";
@@ -10,10 +9,10 @@ import ListItem from "components/List/Item";
 import PaginatedList from "components/PaginatedList";
 import useStores from "hooks/useStores";
 
-type Props = {|
-  document: Document,
-  isOpen?: boolean,
-|};
+type Props = {
+  document: Document;
+  isOpen?: boolean;
+};
 
 function DocumentViews({ document, isOpen }: Props) {
   const { t } = useTranslation();
@@ -36,9 +35,10 @@ function DocumentViews({ document, isOpen }: Props) {
     (view) => !presentIds.includes(view.user.id)
   );
 
-  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
-    sortedViews,
-  ]);
+  const users = React.useMemo(
+    () => sortedViews.map((v) => v.user),
+    [sortedViews]
+  );
 
   return (
     <>

app/components/Editor.tsx

@@ -1,8 +1,9 @@
-// @flow
 import { lighten } from "polished";
 import * as React from "react";
+import { SyntheticEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { withRouter, type RouterHistory } from "react-router-dom";
+import { withRouter, RouterHistory } from "react-router-dom";
+
 import styled, { withTheme } from "styled-components";
 import { light } from "shared/styles/theme";
 import UiStore from "stores/UiStore";
@@ -10,51 +11,58 @@ import ErrorBoundary from "components/ErrorBoundary";
 import Tooltip from "components/Tooltip";
 import embeds from "../embeds";
 import useMediaQuery from "hooks/useMediaQuery";
-import { type Theme } from "types";
+import { Theme } from "types";
 import { isModKey } from "utils/keyboard";
 import { uploadFile } from "utils/uploadFile";
 import { isInternalUrl } from "utils/urls";
 
-const RichMarkdownEditor = React.lazy(() =>
-  import(/* webpackChunkName: "rich-markdown-editor" */ "rich-markdown-editor")
+const RichMarkdownEditor = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "rich-markdown-editor" */ "rich-markdown-editor"
+    )
 );
 
 const EMPTY_ARRAY = [];
 
-export type Props = {|
-  id?: string,
-  value?: string,
-  defaultValue?: string,
-  readOnly?: boolean,
-  grow?: boolean,
-  disableEmbeds?: boolean,
-  ui?: UiStore,
-  shareId?: ?string,
-  autoFocus?: boolean,
-  template?: boolean,
-  placeholder?: string,
-  maxLength?: number,
-  scrollTo?: string,
-  theme?: Theme,
-  handleDOMEvents?: Object,
-  readOnlyWriteCheckboxes?: boolean,
-  onBlur?: (event: SyntheticEvent<>) => any,
-  onFocus?: (event: SyntheticEvent<>) => any,
-  onPublish?: (event: SyntheticEvent<>) => any,
-  onSave?: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
-  onCancel?: () => any,
-  onDoubleClick?: () => any,
-  onChange?: (getValue: () => string) => any,
-  onSearchLink?: (title: string) => any,
-  onHoverLink?: (event: MouseEvent) => any,
-  onCreateLink?: (title: string) => Promise<string>,
-  onImageUploadStart?: () => any,
-  onImageUploadStop?: () => any,
-|};
+export type Props = {
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  readOnly?: boolean;
+  grow?: boolean;
+  disableEmbeds?: boolean;
+  ui?: UiStore;
+  shareId?: string | null;
+  autoFocus?: boolean;
+  template?: boolean;
+  placeholder?: string;
+  maxLength?: number;
+  scrollTo?: string;
+  theme?: Theme;
+  handleDOMEvents?: any;
+  readOnlyWriteCheckboxes?: boolean;
+  onBlur?: (event: SyntheticEvent) => any;
+  onFocus?: (event: SyntheticEvent) => any;
+  onPublish?: (event: SyntheticEvent) => any;
+  onSave?: (a: {
+    done?: boolean;
+    autosave?: boolean;
+    publish?: boolean;
+  }) => any;
+  onCancel?: () => any;
+  onDoubleClick?: () => any;
+  onChange?: (getValue: () => string) => any;
+  onSearchLink?: (title: string) => any;
+  onHoverLink?: (event: MouseEvent) => any;
+  onCreateLink?: (title: string) => Promise<string>;
+  onImageUploadStart?: () => any;
+  onImageUploadStop?: () => any;
+};
 
 type PropsWithRef = Props & {
-  forwardedRef: React.Ref<any>,
-  history: RouterHistory,
+  forwardedRef: React.Ref<any>;
+  history: RouterHistory;
 };
 
 function Editor(props: PropsWithRef) {
@@ -259,6 +267,6 @@ const Span = styled.span`
 
 const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
 
-export default React.forwardRef<Props, typeof Editor>((props, ref) => (
+export default React.forwardRef<typeof Editor>((props, ref) => (
   <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
 ));

app/components/Empty.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Empty = styled.p`

app/components/ErrorBoundary.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as Sentry from "@sentry/react";
 import { observable } from "mobx";
 import { observer } from "mobx-react";
@@ -12,16 +11,18 @@ import { githubIssuesUrl } from "../../shared/utils/routeHelpers";
 import env from "env";
 
 type Props = {
-  children: React.Node,
-  reloadOnChunkMissing?: boolean,
+  children: React.ReactNode;
+  reloadOnChunkMissing?: boolean;
 };
 
 @observer
 class ErrorBoundary extends React.Component<Props> {
-  @observable error: ?Error;
-  @observable showDetails: boolean = false;
+  @observable
+  error: Error | undefined | null;
+  @observable
+  showDetails: boolean = false;
 
-  componentDidCatch(error: Error, info: Object) {
+  componentDidCatch(error: Error, info: any) {
     this.error = error;
     console.error(error);
 

app/components/EventBoundary.tsx

@@ -1,14 +1,14 @@
-// @flow
-
 import * as React from "react";
 
+import { SyntheticEvent } from "react";
+
 type Props = {
-  children: React.Node,
-  className?: string,
+  children: React.ReactNode;
+  className?: string;
 };
 
 export default function EventBoundary({ children, className }: Props) {
-  const handleClick = React.useCallback((event: SyntheticEvent<>) => {
+  const handleClick = React.useCallback((event: SyntheticEvent) => {
     event.preventDefault();
     event.stopPropagation();
   }, []);

app/components/Facepile.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
@@ -6,13 +5,15 @@ import User from "models/User";
 import Avatar from "components/Avatar";
 import Flex from "components/Flex";
 
-type Props = {|
-  users: User[],
-  size?: number,
-  overflow: number,
-  onClick?: (event: SyntheticEvent<>) => mixed,
-  renderAvatar?: (user: User) => React.Node,
-|};
+import { SyntheticEvent } from "react";
+
+type Props = {
+  users: User[];
+  size?: number;
+  overflow: number;
+  onClick?: (event: SyntheticEvent) => unknown;
+  renderAvatar?: (user: User) => React.ReactNode;
+};
 
 function Facepile({
   users,

app/components/Fade.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 import { fadeIn } from "shared/styles/animations";
 

app/components/FilterOptions.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { find } from "lodash";
 import * as React from "react";
 import { useMenuState, MenuButton } from "reakit/Menu";
@@ -8,20 +7,20 @@ import ContextMenu from "components/ContextMenu";
 import MenuItem from "components/ContextMenu/MenuItem";
 import HelpText from "components/HelpText";
 
-type TFilterOption = {|
-  key: string,
-  label: string,
-  note?: string,
-|};
+type TFilterOption = {
+  key: string;
+  label: string;
+  note?: string;
+};
 
-type Props = {|
-  options: TFilterOption[],
-  activeKey: ?string,
-  defaultLabel?: string,
-  selectedPrefix?: string,
-  className?: string,
-  onSelect: (key: ?string) => void,
-|};
+type Props = {
+  options: TFilterOption[];
+  activeKey: string | undefined | null;
+  defaultLabel?: string;
+  selectedPrefix?: string;
+  className?: string;
+  onSelect: (key?: string | null) => void;
+};
 
 const FilterOptions = ({
   options,

app/components/Flex.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 
@@ -8,7 +7,6 @@ type JustifyValues =
   | "space-between"
   | "flex-start"
   | "flex-end";
-
 type AlignValues =
   | "stretch"
   | "center"
@@ -16,29 +14,19 @@ type AlignValues =
   | "flex-start"
   | "flex-end";
 
-type Props = {|
-  column?: ?boolean,
-  shrink?: ?boolean,
-  align?: AlignValues,
-  justify?: JustifyValues,
-  auto?: ?boolean,
-  className?: string,
-  children?: React.Node,
-  role?: string,
-  gap?: number,
-|};
+type Props = {
+  column?: boolean | null;
+  shrink?: boolean | null;
+  align?: AlignValues;
+  justify?: JustifyValues;
+  auto?: boolean | null;
+  className?: string;
+  children?: React.ReactNode;
+  role?: string;
+  gap?: number;
+};
 
-const Flex = React.forwardRef<Props, HTMLDivElement>((props: Props, ref) => {
-  const { children, ...restProps } = props;
-
-  return (
-    <Container ref={ref} {...restProps}>
-      {children}
-    </Container>
-  );
-});
-
-const Container = styled.div`
+const Flex = styled.div<Props>`
   display: flex;
   flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
   flex-direction: ${({ column }) => (column ? "column" : "row")};

app/components/FullscreenLoading.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import Empty from "components/Empty";

app/components/GithubLogo.tsx

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number,
-  fill?: string,
-  className?: string,
+  size?: number;
+  fill?: string;
+  className?: string;
 };
 
 function GithubLogo({ size = 34, fill = "#FFF", className }: Props) {

app/components/GroupListItem.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import { GroupIcon } from "outline-icons";
@@ -15,17 +14,18 @@ import ListItem from "components/List/Item";
 import Modal from "components/Modal";
 
 type Props = {
-  group: Group,
-  groupMemberships: GroupMembershipsStore,
-  membership?: CollectionGroupMembership,
-  showFacepile?: boolean,
-  showAvatar?: boolean,
-  renderActions: ({ openMembersModal: () => void }) => React.Node,
+  group: Group;
+  groupMemberships: GroupMembershipsStore;
+  membership?: CollectionGroupMembership;
+  showFacepile?: boolean;
+  showAvatar?: boolean;
+  renderActions: (a: { openMembersModal: () => void }) => React.ReactNode;
 };
 
 @observer
 class GroupListItem extends React.Component<Props> {
-  @observable membersModalOpen: boolean = false;
+  @observable
+  membersModalOpen: boolean = false;
 
   handleMembersModalOpen = () => {
     this.membersModalOpen = true;

app/components/Guide.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
@@ -6,12 +5,12 @@ import styled from "styled-components";
 import Scrollable from "components/Scrollable";
 import usePrevious from "hooks/usePrevious";
 
-type Props = {|
-  children?: React.Node,
-  isOpen: boolean,
-  title?: string,
-  onRequestClose: () => void,
-|};
+type Props = {
+  children?: React.ReactNode;
+  isOpen: boolean;
+  title?: string;
+  onRequestClose: () => void;
+};
 
 const Guide = ({
   children,

app/components/Header.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { throttle } from "lodash";
 import { observer } from "mobx-react";
 import { transparentize } from "polished";
@@ -8,11 +7,11 @@ import breakpoint from "styled-components-breakpoint";
 import Fade from "components/Fade";
 import Flex from "components/Flex";
 
-type Props = {|
-  breadcrumb?: React.Node,
-  title: React.Node,
-  actions?: React.Node,
-|};
+type Props = {
+  breadcrumb?: React.ReactNode;
+  title: React.ReactNode;
+  actions?: React.ReactNode;
+};
 
 function Header({ breadcrumb, title, actions }: Props) {
   const [isScrolled, setScrolled] = React.useState(false);

app/components/Heading.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Heading = styled.h1`

app/components/HelpText.ts

@@ -1,7 +1,10 @@
-// @flow
 import styled from "styled-components";
 
-const HelpText = styled.p`
+type Props = {
+  small?: boolean;
+};
+
+const HelpText = styled.p<Props>`
   margin-top: 0;
   color: ${(props) => props.theme.textSecondary};
   font-size: ${(props) => (props.small ? "13px" : "inherit")};

app/components/Highlight.tsx

@@ -1,13 +1,12 @@
-// @flow
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
 
 type Props = {
-  highlight: ?string | RegExp,
-  processResult?: (tag: string) => string,
-  text: string,
-  caseSensitive?: boolean,
+  highlight: string | undefined | null | RegExp;
+  processResult?: (tag: string) => string;
+  text: string;
+  caseSensitive?: boolean;
 };
 
 function Highlight({

app/components/HoverPreview.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { inject } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
@@ -14,10 +13,10 @@ const DELAY_OPEN = 300;
 const DELAY_CLOSE = 300;
 
 type Props = {
-  node: HTMLAnchorElement,
-  event: MouseEvent,
-  documents: DocumentsStore,
-  onClose: () => void,
+  node: HTMLAnchorElement;
+  event: MouseEvent;
+  documents: DocumentsStore;
+  onClose: () => void;
 };
 
 function HoverPreviewInternal({ node, documents, onClose, event }: Props) {
@@ -26,7 +25,7 @@ function HoverPreviewInternal({ node, documents, onClose, event }: Props) {
   const [isVisible, setVisible] = React.useState(false);
   const timerClose = React.useRef();
   const timerOpen = React.useRef();
-  const cardRef = React.useRef<?HTMLDivElement>();
+  const cardRef = React.useRef<HTMLDivElement | undefined | null>();
 
   const startCloseTimer = () => {
     stopOpenTimer();

app/components/HoverPreviewDocument.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
@@ -9,8 +8,8 @@ import Editor from "components/Editor";
 import useStores from "hooks/useStores";
 
 type Props = {
-  url: string,
-  children: (React.Node) => React.Node,
+  url: string;
+  children: (a: React.ReactNode) => React.ReactNode;
 };
 
 function HoverPreviewDocument({ url, children }: Props) {

app/components/IconPicker.tsx

@@ -1,4 +1,3 @@
-// @flow
 import {
   CollectionIcon,
   CoinsIcon,
@@ -126,12 +125,12 @@ const colors = [
   "#2F362F",
 ];
 
-type Props = {|
-  onOpen?: () => void,
-  onChange: (color: string, icon: string) => void,
-  icon: string,
-  color: string,
-|};
+type Props = {
+  onOpen?: () => void;
+  onChange: (color: string, icon: string) => void;
+  icon: string;
+  color: string;
+};
 
 function IconPicker({ onOpen, icon, color, onChange }: Props) {
   const { t } = useTranslation();

app/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} />;

app/components/Input.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -7,6 +6,8 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Flex from "components/Flex";
 
+import { SyntheticEvent, ChangeEvent, KeyboardEvent } from "react";
+
 const RealTextarea = styled.textarea`
   border: 0;
   flex: 1;
@@ -84,46 +85,47 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = {|
-  type?: "text" | "email" | "checkbox" | "search" | "textarea",
-  value?: string,
-  label?: string,
-  className?: string,
-  labelHidden?: boolean,
-  flex?: boolean,
-  short?: boolean,
-  margin?: string | number,
-  icon?: React.Node,
-  name?: string,
-  minLength?: number,
-  maxLength?: number,
-  autoFocus?: boolean,
-  autoComplete?: boolean | string,
-  readOnly?: boolean,
-  required?: boolean,
-  disabled?: boolean,
-  placeholder?: string,
+export type Props = {
+  type?: "text" | "email" | "checkbox" | "search" | "textarea";
+  value?: string;
+  label?: string;
+  className?: string;
+  labelHidden?: boolean;
+  flex?: boolean;
+  short?: boolean;
+  margin?: string | number;
+  icon?: React.ReactNode;
+  name?: string;
+  minLength?: number;
+  maxLength?: number;
+  autoFocus?: boolean;
+  autoComplete?: boolean | string;
+  readOnly?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
   onChange?: (
-    ev: SyntheticInputEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => mixed,
-  onKeyDown?: (ev: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  onFocus?: (ev: SyntheticEvent<>) => mixed,
-  onBlur?: (ev: SyntheticEvent<>) => mixed,
-|};
+    ev: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => unknown;
+  onKeyDown?: (ev: KeyboardEvent<HTMLInputElement>) => unknown;
+  onFocus?: (ev: SyntheticEvent) => unknown;
+  onBlur?: (ev: SyntheticEvent) => unknown;
+};
 
 @observer
 class Input extends React.Component<Props> {
-  input: ?HTMLInputElement;
-  @observable focused: boolean = false;
+  input: HTMLInputElement | undefined | null;
+  @observable
+  focused: boolean = false;
 
-  handleBlur = (ev: SyntheticEvent<>) => {
+  handleBlur = (ev: SyntheticEvent) => {
     this.focused = false;
     if (this.props.onBlur) {
       this.props.onBlur(ev);
     }
   };
 
-  handleFocus = (ev: SyntheticEvent<>) => {
+  handleFocus = (ev: SyntheticEvent) => {
     this.focused = true;
     if (this.props.onFocus) {
       this.props.onFocus(ev);

app/components/InputLarge.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 import Input from "./Input";
 

app/components/InputRich.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import * as React from "react";
@@ -8,18 +7,20 @@ import Editor from "components/Editor";
 import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";
 
-type Props = {|
-  label: string,
-  minHeight?: number,
-  maxHeight?: number,
-  readOnly?: boolean,
-  ui: UiStore,
-|};
+type Props = {
+  label: string;
+  minHeight?: number;
+  maxHeight?: number;
+  readOnly?: boolean;
+  ui: UiStore;
+};
 
 @observer
 class InputRich extends React.Component<Props> {
-  @observable editorComponent: React.ComponentType<any>;
-  @observable focused: boolean = false;
+  @observable
+  editorComponent: React.ComponentType<any>;
+  @observable
+  focused: boolean = false;
 
   handleBlur = () => {
     this.focused = false;

app/components/InputSearch.tsx

@@ -1,17 +1,19 @@
-// @flow
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
-import Input, { type Props as InputProps } from "./Input";
+import Input from "./Input";
 
-type Props = {|
-  ...InputProps,
-  placeholder?: string,
-  value?: string,
-  onChange: (event: SyntheticInputEvent<>) => mixed,
-  onKeyDown?: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-|};
+import { Props as InputProps } from "./Input";
+
+import { ChangeEvent, KeyboardEvent } from "react";
+
+type Props = {
+  placeholder?: string;
+  value?: string;
+  onChange: (event: ChangeEvent) => unknown;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => unknown;
+} & InputProps;
 
 export default function InputSearch(props: Props) {
   const { t } = useTranslation();

app/components/InputSearchPage.tsx

@@ -1,38 +1,38 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { SearchIcon } from "outline-icons";
 import * as React from "react";
-import { withTranslation, type TFunction } from "react-i18next";
+import { SyntheticEvent, ChangeEvent, KeyboardEvent } from "react";
+import { withTranslation, TFunction } from "react-i18next";
 import keydown from "react-keydown";
-import { withRouter, type RouterHistory } from "react-router-dom";
+import { withRouter, RouteComponentProps } from "react-router-dom";
 import styled, { withTheme } from "styled-components";
 import Input from "./Input";
-import { type Theme } from "types";
+import { Theme } from "types";
 import { meta } from "utils/keyboard";
 import { searchUrl } from "utils/routeHelpers";
 
-type Props = {
-  history: RouterHistory,
-  theme: Theme,
-  source: string,
-  placeholder?: string,
-  label?: string,
-  labelHidden?: boolean,
-  collectionId?: string,
-  value: string,
-  onChange: (event: SyntheticInputEvent<>) => mixed,
-  onKeyDown: (event: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-  t: TFunction,
+type Props = RouteComponentProps & {
+  theme: Theme;
+  source: string;
+  placeholder?: string;
+  label?: string;
+  labelHidden?: boolean;
+  collectionId?: string;
+  value: string;
+  onChange: (event: ChangeEvent) => unknown;
+  onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => unknown;
+  t: TFunction;
 };
 
 @observer
 class InputSearchPage extends React.Component<Props> {
-  input: ?Input;
-  @observable focused: boolean = false;
+  input: Input | undefined | null;
+  @observable
+  focused: boolean = false;
 
   @keydown(`${meta}+f`)
-  focus(ev: SyntheticEvent<>) {
+  focus(ev: SyntheticEvent) {
     ev.preventDefault();
 
     if (this.input) {
@@ -40,7 +40,7 @@ class InputSearchPage extends React.Component<Props> {
     }
   }
 
-  handleSearchInput = (ev: SyntheticInputEvent<>) => {
+  handleSearchInput = (ev: ChangeEvent) => {
     ev.preventDefault();
     this.props.history.push(
       searchUrl(ev.target.value, {

app/components/InputSelect.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -31,22 +30,26 @@ const Wrapper = styled.label`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-export type Option = { label: string, value: string };
+export type Option = {
+  label: string;
+  value: string;
+};
 
 export type Props = {
-  value?: string,
-  label?: string,
-  short?: boolean,
-  className?: string,
-  labelHidden?: boolean,
-  options: Option[],
-  onBlur?: () => void,
-  onFocus?: () => void,
+  value?: string;
+  label?: string;
+  short?: boolean;
+  className?: string;
+  labelHidden?: boolean;
+  options: Option[];
+  onBlur?: () => void;
+  onFocus?: () => void;
 };
 
 @observer
 class InputSelect extends React.Component<Props> {
-  @observable focused: boolean = false;
+  @observable
+  focused: boolean = false;
 
   handleBlur = () => {
     this.focused = false;
@@ -57,14 +60,8 @@ class InputSelect extends React.Component<Props> {
   };
 
   render() {
-    const {
-      label,
-      className,
-      labelHidden,
-      options,
-      short,
-      ...rest
-    } = this.props;
+    const { label, className, labelHidden, options, short, ...rest } =
+      this.props;
 
     const wrappedLabel = <LabelText>{label}</LabelText>;
 

app/components/InputSelectPermission.tsx

@@ -1,11 +1,10 @@
-// @flow
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import InputSelect, { type Props, type Option } from "./InputSelect";
+import InputSelect from "./InputSelect";
 
-export default function InputSelectPermission(
-  props: $Rest<Props, { options: Array<Option> }>
-) {
+import { Props, Option } from "./InputSelect";
+
+export default function InputSelectPermission(props: Omit<Props, "options">) {
   const { t } = useTranslation();
 
   return (

app/components/Key.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Key = styled.kbd`

app/components/Labeled.tsx

@@ -1,13 +1,12 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
 import Flex from "components/Flex";
 
-type Props = {|
-  label: React.Node | string,
-  children: React.Node,
-|};
+type Props = {
+  label: React.ReactNode | string;
+  children: React.ReactNode;
+};
 
 const Labeled = ({ label, children, ...props }: Props) => (
   <Flex column {...props}>

app/components/LanguagePrompt.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { find } from "lodash";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";

app/components/Layout.tsx

@@ -1,18 +1,20 @@
-// @flow
 import { observable } from "mobx";
 import { observer, inject } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import * as React from "react";
+import { SyntheticEvent } from "react";
 import { Helmet } from "react-helmet";
-import { withTranslation, type TFunction } from "react-i18next";
+import { withTranslation, TFunction } from "react-i18next";
+
 import keydown from "react-keydown";
 import {
   Switch,
   Route,
   Redirect,
   withRouter,
-  type RouterHistory,
+  RouterHistory,
 } from "react-router-dom";
+
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import AuthStore from "stores/AuthStore";
@@ -39,24 +41,26 @@ import {
 } from "utils/routeHelpers";
 
 type Props = {
-  documents: DocumentsStore,
-  children?: ?React.Node,
-  actions?: ?React.Node,
-  title?: ?React.Node,
-  auth: AuthStore,
-  ui: UiStore,
-  history: RouterHistory,
-  policies: PoliciesStore,
-  notifications?: React.Node,
-  i18n: Object,
-  t: TFunction,
+  documents: DocumentsStore;
+  children?: React.ReactNode | null;
+  actions?: React.ReactNode | null;
+  title?: React.ReactNode | null;
+  auth: AuthStore;
+  ui: UiStore;
+  history: RouterHistory;
+  policies: PoliciesStore;
+  notifications?: React.ReactNode;
+  i18n: any;
+  t: TFunction;
 };
 
 @observer
 class Layout extends React.Component<Props> {
-  scrollable: ?HTMLDivElement;
-  @observable redirectTo: ?string;
-  @observable keyboardShortcutsOpen: boolean = false;
+  scrollable: HTMLDivElement | undefined | null;
+  @observable
+  redirectTo: string | undefined | null;
+  @observable
+  keyboardShortcutsOpen: boolean = false;
 
   componentDidUpdate() {
     if (this.redirectTo) {
@@ -79,7 +83,7 @@ class Layout extends React.Component<Props> {
   };
 
   @keydown(["t", "/", `${meta}+k`])
-  goToSearch(ev: SyntheticEvent<>) {
+  goToSearch(ev: SyntheticEvent) {
     ev.preventDefault();
     ev.stopPropagation();
     this.redirectTo = searchUrl();

app/components/List/Item.tsx

@@ -1,15 +1,14 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import Flex from "components/Flex";
 
 type Props = {
-  image?: React.Node,
-  title: React.Node,
-  subtitle?: React.Node,
-  actions?: React.Node,
-  border?: boolean,
-  small?: boolean,
+  image?: React.ReactNode;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  actions?: React.ReactNode;
+  border?: boolean;
+  small?: boolean;
 };
 
 const ListItem = ({

app/components/List/List.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const List = styled.ol`

app/components/List/Placeholder.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { times } from "lodash";
 import * as React from "react";
 import styled from "styled-components";
@@ -7,7 +6,7 @@ import Flex from "components/Flex";
 import Mask from "components/Mask";
 
 type Props = {
-  count?: number,
+  count?: number;
 };
 
 const Placeholder = ({ count }: Props) => {

app/components/List/index.ts

@@ -1,3 +1,2 @@
-// @flow
 import List from "./List";
 export default List;

app/components/LoadingIndicator/LoadingIndicator.js

@@ -1,25 +0,0 @@
-// @flow
-import { inject, observer } from "mobx-react";
-import * as React from "react";
-import UiStore from "stores/UiStore";
-
-type Props = {
-  ui: UiStore,
-};
-
-@observer
-class LoadingIndicator extends React.Component<Props> {
-  componentDidMount() {
-    this.props.ui.enableProgressBar();
-  }
-
-  componentWillUnmount() {
-    this.props.ui.disableProgressBar();
-  }
-
-  render() {
-    return null;
-  }
-}
-
-export default inject("ui")(LoadingIndicator);

app/components/LoadingIndicator/LoadingIndicator.ts

@@ -0,0 +1,16 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import useStores from "hooks/useStores";
+
+function LoadingIndicator() {
+  const { ui } = useStores();
+
+  React.useEffect(() => {
+    ui.enableProgressBar();
+    return () => ui.disableProgressBar();
+  }, [ui]);
+
+  return null;
+}
+
+export default observer(LoadingIndicator);

app/components/LoadingIndicator/LoadingIndicatorBar.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import styled, { keyframes } from "styled-components";
 

app/components/LoadingIndicator/index.ts

@@ -1,4 +1,3 @@
-// @flow
 import LoadingIndicator from "./LoadingIndicator";
 import LoadingIndicatorBar from "./LoadingIndicatorBar";
 export default LoadingIndicator;

app/components/LoadingPlaceholder/ListPlaceholder.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { times } from "lodash";
 import * as React from "react";
 import styled from "styled-components";
@@ -7,7 +6,7 @@ import Flex from "components/Flex";
 import Mask from "components/Mask";
 
 type Props = {
-  count?: number,
+  count?: number;
 };
 
 const ListPlaceHolder = ({ count }: Props) => {

app/components/LoadingPlaceholder/LoadingPlaceholder.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import DelayedMount from "components/DelayedMount";
@@ -6,7 +5,7 @@ import Fade from "components/Fade";
 import Flex from "components/Flex";
 import Mask from "components/Mask";
 
-export default function LoadingPlaceholder(props: Object) {
+export default function LoadingPlaceholder(props: any) {
   return (
     <DelayedMount>
       <Wrapper>

app/components/LoadingPlaceholder/index.ts

@@ -1,4 +1,3 @@
-// @flow
 import ListPlaceholder from "./ListPlaceholder";
 import LoadingPlaceholder from "./LoadingPlaceholder";
 

app/components/LocaleTime.tsx

@@ -1,6 +1,6 @@
-// @flow
-import { format, formatDistanceToNow } from "date-fns";
 import {
+  format,
+  formatDistanceToNow,
   enUS,
   de,
   fr,
@@ -12,7 +12,8 @@ import {
   zhCN,
   zhTW,
   ru,
-} from "date-fns/locale";
+} from "date-fns";
+
 import * as React from "react";
 import Tooltip from "components/Tooltip";
 import useUserLocale from "hooks/useUserLocale";
@@ -48,11 +49,11 @@ function eachMinute(fn) {
 }
 
 type Props = {
-  dateTime: string,
-  children?: React.Node,
-  tooltipDelay?: number,
-  addSuffix?: boolean,
-  shorten?: boolean,
+  dateTime: string;
+  children?: React.ReactNode;
+  tooltipDelay?: number;
+  addSuffix?: boolean;
+  shorten?: boolean;
 };
 
 function LocaleTime({
@@ -64,7 +65,7 @@ function LocaleTime({
 }: Props) {
   const userLocale = useUserLocale();
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line no-unused-vars
-  const callback = React.useRef();
+  const callback = React.useRef<Function>();
 
   React.useEffect(() => {
     callback.current = eachMinute(() => {

app/components/Mask.tsx

@@ -1,16 +1,15 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 import { randomInteger } from "shared/random";
 import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";
 
-type Props = {|
-  header?: boolean,
-  height?: number,
-  minWidth?: number,
-  maxWidth?: number,
-|};
+type Props = {
+  header?: boolean;
+  height?: number;
+  minWidth?: number;
+  maxWidth?: number;
+};
 
 class Mask extends React.Component<Props> {
   width: number;
@@ -20,7 +19,7 @@ class Mask extends React.Component<Props> {
   }
 
   constructor(props: Props) {
-    super();
+    super(props);
     this.width = randomInteger(props.minWidth || 75, props.maxWidth || 100);
   }
 

app/components/Modal.tsx

@@ -1,4 +1,3 @@
-// @flow
 import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
 import { transparentize } from "polished";
@@ -16,12 +15,12 @@ import useUnmount from "hooks/useUnmount";
 
 let openModals = 0;
 
-type Props = {|
-  children?: React.Node,
-  isOpen: boolean,
-  title?: string,
-  onRequestClose: () => void,
-|};
+type Props = {
+  children?: React.ReactNode;
+  isOpen: boolean;
+  title?: string;
+  onRequestClose: () => void;
+};
 
 const Modal = ({
   children,

app/components/Notice.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Notice = styled.p`

app/components/NoticeAlert.tsx

@@ -1,8 +1,11 @@
-// @flow
 import * as React from "react";
 import Notice from "components/Notice";
 
-export default function AlertNotice({ children }: { children: React.Node }) {
+export default function AlertNotice({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <Notice muted>
       <svg

app/components/NoticeTip.ts

@@ -1,4 +1,3 @@
-// @flow
 import styled from "styled-components";
 
 const Notice = styled.p`

app/components/NudeButton.tsx

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import styled from "styled-components";
 
@@ -14,6 +13,6 @@ const Button = styled.button`
   user-select: none;
 `;
 
-export default React.forwardRef<any, typeof Button>(
+export default React.forwardRef<typeof Button>(
   ({ size = 24, ...props }, ref) => <Button size={size} {...props} ref={ref} />
 );

app/components/OutlineLogo.tsx

@@ -1,10 +1,9 @@
-// @flow
 import * as React from "react";
 
 type Props = {
-  size?: number,
-  fill?: string,
-  className?: string,
+  size?: number;
+  fill?: string;
+  className?: string;
 };
 
 function OutlineLogo({ size = 32, fill = "#333", className }: Props) {

app/components/PageTheme.ts

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import { useTheme } from "styled-components";
 import useStores from "hooks/useStores";

app/components/PageTitle.tsx

@@ -1,14 +1,13 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
 import useStores from "hooks/useStores";
 import { cdnPath } from "utils/urls";
 
-type Props = {|
-  title: string,
-  favicon?: string,
-|};
+type Props = {
+  title: string;
+  favicon?: string;
+};
 
 const PageTitle = ({ title, favicon }: Props) => {
   const { auth } = useStores();

app/components/PaginatedDocumentList.tsx

@@ -1,23 +1,22 @@
-// @flow
 import { observer } from "mobx-react";
 import * as React from "react";
 import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
 import PaginatedList from "components/PaginatedList";
 
-type Props = {|
-  documents: Document[],
-  fetch: (options: ?Object) => Promise<void>,
-  options?: Object,
-  heading?: React.Node,
-  empty?: React.Node,
-  showNestedDocuments?: boolean,
-  showCollection?: boolean,
-  showPublished?: boolean,
-  showPin?: boolean,
-  showDraft?: boolean,
-  showTemplate?: boolean,
-|};
+type Props = {
+  documents: Document[];
+  fetch: (options?: any | null) => Promise<void>;
+  options?: any;
+  heading?: React.ReactNode;
+  empty?: React.ReactNode;
+  showNestedDocuments?: boolean;
+  showCollection?: boolean;
+  showPublished?: boolean;
+  showPin?: boolean;
+  showDraft?: boolean;
+  showTemplate?: boolean;
+};
 
 @observer
 class PaginatedDocumentList extends React.Component<Props> {

app/components/PaginatedList.test.tsx

@@ -1,4 +1,3 @@
-// @flow
 import "../stores";
 import { shallow } from "enzyme";
 import * as React from "react";

app/components/PaginatedList.tsx

@@ -1,4 +1,3 @@
-// @flow
 import ArrowKeyNavigation from "boundless-arrow-key-navigation";
 import { isEqual } from "lodash";
 import { observable, action } from "mobx";
@@ -10,23 +9,29 @@ import DelayedMount from "components/DelayedMount";
 import { ListPlaceholder } from "components/LoadingPlaceholder";
 
 type Props = {
-  fetch?: (options: ?Object) => Promise<void>,
-  options?: Object,
-  heading?: React.Node,
-  empty?: React.Node,
-  items: any[],
-  renderItem: (any) => React.Node,
+  fetch?: (options?: any | null) => Promise<void>;
+  options?: any;
+  heading?: React.ReactNode;
+  empty?: React.ReactNode;
+  items: any[];
+  renderItem: (a: any) => React.ReactNode;
 };
 
 @observer
 class PaginatedList extends React.Component<Props> {
   isInitiallyLoaded: boolean = false;
-  @observable isLoaded: boolean = false;
-  @observable isFetchingMore: boolean = false;
-  @observable isFetching: boolean = false;
-  @observable renderCount: number = DEFAULT_PAGINATION_LIMIT;
-  @observable offset: number = 0;
-  @observable allowLoadMore: boolean = true;
+  @observable
+  isLoaded: boolean = false;
+  @observable
+  isFetchingMore: boolean = false;
+  @observable
+  isFetching: boolean = false;
+  @observable
+  renderCount: number = DEFAULT_PAGINATION_LIMIT;
+  @observable
+  offset: number = 0;
+  @observable
+  allowLoadMore: boolean = true;
 
   constructor(props: Props) {
     super(props);