chore: Upgrade flow (#1854)

* wip: upgrade flow

* chore: More sealed props improvements

* Final fixes

app/components/Avatar/Avatar.js

@@ -3,13 +3,17 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import User from "models/User";
 import placeholder from "./placeholder.png";
 
-type Props = {
+type Props = {|
   src: string,
   size: number,
   icon?: React.Node,
-};
+  user?: User,
+  onClick?: () => void,
+  className?: string,
+|};
 
 @observer
 class Avatar extends React.Component<Props> {

app/components/Button.js

@@ -108,8 +108,8 @@ export const Inner = styled.span`
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
-export type Props = {
-  type?: string,
+export type Props = {|
+  type?: "button" | "submit",
   value?: string,
   icon?: React.Node,
   iconColor?: string,
@@ -118,9 +118,21 @@ export type Props = {
   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,
-};
+
+  "data-on"?: string,
+  "data-event-category"?: string,
+  "data-event-action"?: string,
+|};
 
 function Button({
   type = "text",

app/components/Checkbox.js

@@ -4,15 +4,18 @@ import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import HelpText from "components/HelpText";
 
-export type Props = {
+export type Props = {|
   checked?: boolean,
   label?: string,
   labelHidden?: boolean,
   className?: string,
+  name?: string,
+  disabled?: boolean,
+  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
   note?: string,
   short?: boolean,
   small?: boolean,
-};
+|};
 
 const LabelText = styled.span`
   font-weight: 500;

app/components/ContextMenu/MenuItem.js

@@ -4,13 +4,16 @@ import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled from "styled-components";
 
-type Props = {
+type Props = {|
   onClick?: (SyntheticEvent<>) => void | Promise<void>,
   children?: React.Node,
   selected?: boolean,
   disabled?: boolean,
+  to?: string,
+  href?: string,
+  target?: "_blank",
   as?: string | React.ComponentType<*>,
-};
+|};
 
 const MenuItem = ({
   onClick,

app/components/DocumentList.js

@@ -4,10 +4,15 @@ import * as React from "react";
 import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
 
-type Props = {
+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/DocumentMeta.js

@@ -23,14 +23,14 @@ const Modified = styled.span`
   font-weight: ${(props) => (props.highlight ? "600" : "400")};
 `;
 
-type Props = {
+type Props = {|
   showCollection?: boolean,
   showPublished?: boolean,
   showLastViewed?: boolean,
   document: Document,
   children: React.Node,
   to?: string,
-};
+|};
 
 function DocumentMeta({
   showPublished,

app/components/Editor.js

@@ -16,14 +16,31 @@ const RichMarkdownEditor = React.lazy(() => import("rich-markdown-editor"));
 
 const EMPTY_ARRAY = [];
 
-type Props = {
+export type Props = {|
   id?: string,
+  value?: string,
   defaultValue?: string,
   readOnly?: boolean,
   grow?: boolean,
   disableEmbeds?: boolean,
   ui?: UiStore,
-};
+  autoFocus?: boolean,
+  template?: boolean,
+  placeholder?: string,
+  scrollTo?: string,
+  readOnlyWriteCheckboxes?: boolean,
+  onBlur?: (event: SyntheticEvent<>) => any,
+  onFocus?: (event: SyntheticEvent<>) => any,
+  onPublish?: (event: SyntheticEvent<>) => any,
+  onSave?: ({ done?: boolean, autosave?: boolean, publish?: boolean }) => any,
+  onCancel?: () => 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>,

app/components/Image.js

@@ -2,10 +2,13 @@
 import * as React from "react";
 import { cdnPath } from "utils/urls";
 
-type Props = {
+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.js

@@ -75,8 +75,8 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = {
-  type?: string,
+export type Props = {|
+  type?: "text" | "email" | "checkbox" | "search",
   value?: string,
   label?: string,
   className?: string,
@@ -85,9 +85,18 @@ export type Props = {
   short?: boolean,
   margin?: string | number,
   icon?: React.Node,
+  name?: string,
+  minLength?: number,
+  maxLength?: number,
+  autoFocus?: boolean,
+  autoComplete?: boolean | string,
+  readOnly?: boolean,
+  required?: boolean,
+  placeholder?: string,
+  onChange?: (ev: SyntheticInputEvent<HTMLInputElement>) => mixed,
   onFocus?: (ev: SyntheticEvent<>) => void,
   onBlur?: (ev: SyntheticEvent<>) => void,
-};
+|};
 
 @observer
 class Input extends React.Component<Props> {

app/components/InputRich.js

@@ -8,13 +8,13 @@ import Editor from "components/Editor";
 import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";
 
-type Props = {
+type Props = {|
   label: string,
   minHeight?: number,
   maxHeight?: number,
   readOnly?: boolean,
   ui: UiStore,
-};
+|};
 
 @observer
 class InputRich extends React.Component<Props> {

app/components/InputSelect.js

@@ -36,6 +36,8 @@ export type Props = {
   className?: string,
   labelHidden?: boolean,
   options: Option[],
+  onBlur?: () => void,
+  onFocus?: () => void,
 };
 
 @observer

app/components/Labeled.js

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

app/components/Mask.js

@@ -5,10 +5,10 @@ import { randomInteger } from "shared/random";
 import { pulsate } from "shared/styles/animations";
 import Flex from "components/Flex";
 
-type Props = {
+type Props = {|
   header?: boolean,
   height?: number,
-};
+|};
 
 class Mask extends React.Component<Props> {
   width: number;
@@ -23,7 +23,7 @@ class Mask extends React.Component<Props> {
   }
 
   render() {
-    return <Redacted width={this.width} {...this.props} />;
+    return <Redacted width={this.width} />;
   }
 }
 

app/components/Modal.js

@@ -13,12 +13,12 @@ import Scrollable from "components/Scrollable";
 
 ReactModal.setAppElement("#root");
 
-type Props = {
+type Props = {|
   children?: React.Node,
   isOpen: boolean,
   title?: string,
   onRequestClose: () => void,
-};
+|};
 
 const GlobalStyles = createGlobalStyle`
   .ReactModal__Overlay {

app/components/PaginatedDocumentList.js

@@ -5,13 +5,18 @@ import Document from "models/Document";
 import DocumentListItem from "components/DocumentListItem";
 import PaginatedList from "components/PaginatedList";
 
-type Props = {
+type Props = {|
   documents: Document[],
   fetch: (options: ?Object) => Promise<void>,
   options?: Object,
   heading?: React.Node,
   empty?: React.Node,
-};
+  showCollection?: boolean,
+  showPublished?: boolean,
+  showPin?: boolean,
+  showDraft?: boolean,
+  showTemplate?: boolean,
+|};
 
 @observer
 class PaginatedDocumentList extends React.Component<Props> {

app/components/Sidebar/components/HeaderBlock.js

@@ -5,12 +5,13 @@ import styled from "styled-components";
 import Flex from "components/Flex";
 import TeamLogo from "components/TeamLogo";
 
-type Props = {
+type Props = {|
   teamName: string,
   subheading: React.Node,
   showDisclosure?: boolean,
+  onClick: (event: SyntheticEvent<>) => void,
   logoUrl: string,
-};
+|};
 
 const HeaderBlock = React.forwardRef<Props, any>(
   ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (

app/components/Switch.js

@@ -3,12 +3,15 @@ import * as React from "react";
 import styled from "styled-components";
 import { LabelText } from "components/Input";
 
-type Props = {
+type Props = {|
   width?: number,
   height?: number,
   label?: string,
+  checked?: boolean,
+  disabled?: boolean,
+  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => mixed,
   id?: string,
-};
+|};
 
 function Switch({ width = 38, height = 20, label, ...props }: Props) {
   const component = (

app/components/Tooltip.js

@@ -3,14 +3,14 @@ import Tippy from "@tippy.js/react";
 import * as React from "react";
 import styled from "styled-components";
 
-type Props = {
+type Props = {|
   tooltip: React.Node,
   shortcut?: React.Node,
   placement?: "top" | "bottom" | "left" | "right",
   children: React.Node,
   delay?: number,
   className?: string,
-};
+|};
 
 class Tooltip extends React.Component<Props> {
   render() {