@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/components/{dropdown-option.jsx → dropdown-option.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * The Option is an item to be used in the Select components and the
  * derivations such as MultiSelect, CheckList, and CheckBoxList. Also includes
@@ -10,61 +9,53 @@ import {css, StyleSheet} from "aphrodite";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
-import {focusWithChromeStickyFocusBugWorkaround} from "./util.js";
+import {focusWithChromeStickyFocusBugWorkaround} from "./util";
 
 export type OptionRenderer = (
-    children: ?React.Element<any>,
+    children: React.ReactElement<any> | null | undefined,
     value: string,
     selected: boolean,
     disabled?: boolean,
-) => React.Element<any>;
+) => React.ReactElement<any>;
 
 const {Icon} = components;
 const {colors} = globalStyles;
 
-const findAndFocusElement = (component: ?Element) => {
-    const DOMNode: ?(Element | Text) = ReactDOM.findDOMNode(component);
-    const button = ((DOMNode: any): HTMLInputElement);
-    // $FlowIgnore[method-unbinding]
+const findAndFocusElement = (component?: Element | null) => {
+    const DOMNode: Element | Text | null | undefined =
+        ReactDOM.findDOMNode(component);
+    const button = DOMNode as HTMLInputElement;
+    // @ts-expect-error [FEI-5003] - TS2774 - This condition will always return true since this function is always defined. Did you mean to call it instead?
     if (button.focus) {
         focusWithChromeStickyFocusBugWorkaround(button);
     }
 };
 
-type OptionProps = {|
+type OptionProps = {
     // The value to use when the option is selected
-    value: string,
-
+    value: string;
     // The display of the option
-    children?: React.Node,
-
+    children?: React.ReactNode;
     // Is the current option selected?
-    selected?: boolean,
-
+    selected?: boolean;
     // Is the current option disabled?
-    disabled?: boolean,
-
+    disabled?: boolean;
     // An event when an option is clicked
-    onClick?: () => void,
-
+    onClick?: () => void;
     // An optional rendering function to render the details of the option
-    optionRenderer?: OptionRenderer,
-
+    optionRenderer?: OptionRenderer;
     // An optional function to call when the dropdown should close
     // Only relevant if the Option is inside of a dropdown menu
-    onDropdownClose?: () => void,
-
+    onDropdownClose?: () => void;
     // An optional value to override the focus styling of an option.
     // Use caution when using this - keyboard users need to know what they're
     // focused on in order to interact with the product!
-    hideFocusState?: boolean,
-
+    hideFocusState?: boolean;
     // An optional test id that can be used to identify this Option in automated tests.
-    testId?: string,
-
+    testId?: string;
     // Text to provide for assistive tech users
-    ariaLabel?: string,
-|};
+    ariaLabel?: string;
+};
 
 const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
  S3.5,9.9,3.4,9.8L2.5,8.9L0.2,6.6C0.1,6.5,0,6.3,0,6.2s0.1-0.3,0.2-0.4
@@ -75,6 +66,7 @@ const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
 export const optionHeight = 30;
 
 class Option extends React.Component<OptionProps> {
+    // @ts-expect-error [FEI-5003] - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
     node: HTMLDivElement;
 
     handleKeyDown(event: any): void {
@@ -106,7 +98,7 @@ class Option extends React.Component<OptionProps> {
         }
     }
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {
             selected,
             value,
@@ -124,6 +116,7 @@ class Option extends React.Component<OptionProps> {
                 // TODO(mdr): We found a new Flow error when upgrading:
                 //     "node (null) This type is incompatible with this.node (HTMLDivElement)"
                 // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
+                // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLButtonElement | null' is not assignable to type 'HTMLDivElement'.
                 ref={(node) => (this.node = node)}
                 value={value}
                 role="menuitemradio"
@@ -133,6 +126,7 @@ class Option extends React.Component<OptionProps> {
                     disabled && styles.cursorDefault,
                     hideFocusState && styles.noFocus,
                 )}
+                // @ts-expect-error [FEI-5003] - TS2322 - Type '(value: string) => void' is not assignable to type 'MouseEventHandler<HTMLButtonElement>'.
                 onClick={(value: string) => {
                     if (!disabled && onClick) {
                         // TODO(mdr): We found a new Flow error here when upgrading
@@ -140,10 +134,11 @@ class Option extends React.Component<OptionProps> {
                         //     argument)". This comment was automatically added to
                         //     this file, to suppress the error for now. Please
                         //     consider fixing!
-                        // $FlowFixMe[extra-arg]
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 0 arguments, but got 1.
                         onClick(value);
                     }
                 }}
+                // @ts-expect-error [FEI-5003] - TS2322 - Type '(event: KeyboardEvent) => void' is not assignable to type 'KeyboardEventHandler<HTMLButtonElement>'.
                 onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}
                 aria-disabled={disabled}
                 aria-label={ariaLabel}
@@ -189,23 +184,23 @@ class Option extends React.Component<OptionProps> {
 // - how does the drop down interact with tooltips?  what's the z-index order?
 class OptionGroup extends React.Component<{
     // An event when an option is selected
-    onSelected: (value: string) => void,
+    onSelected: (value: string) => void;
     // The list of options to display
-    children?: Array<React.Element<typeof Option>>,
+    children?: Array<React.ReactElement<React.ComponentProps<typeof Option>>>;
     // The currently selected options
-    selectedValues: Array<string>,
+    selectedValues: Array<string>;
     // An optional rendering function to render the details of the options
-    optionRenderer?: OptionRenderer,
+    optionRenderer?: OptionRenderer;
     // An override to skip the bit of top/bottom spacing around the group
-    noMargin?: boolean,
+    noMargin?: boolean;
     // An optional function to call when the dropdown should close
-    onDropdownClose?: () => void,
+    onDropdownClose?: () => void;
     // An optional value to override the focus styling of an option.
     // Use caution when using this - keyboard users need to know what
     // they're focused on in order to interact with the product!
-    hideFocusState?: boolean,
-    ...
+    hideFocusState?: boolean;
 }> {
+    // @ts-expect-error [FEI-5003] - TS2564 - Property 'focusedElement' has no initializer and is not definitely assigned in the constructor.
     focusedElement: Element;
 
     componentDidMount() {
@@ -214,7 +209,7 @@ class OptionGroup extends React.Component<{
         }
     }
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {
             children,
             onSelected,
@@ -227,6 +222,7 @@ class OptionGroup extends React.Component<{
 
         return (
             <div
+                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Window | null' is not assignable to type 'Top<string | number> | undefined'.
                 style={{top}}
                 className={css(
                     styles.optionGroup,
@@ -234,6 +230,7 @@ class OptionGroup extends React.Component<{
                 )}
             >
                 {React.Children.map(children, (child, index) => {
+                    // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                     const selected = selectedValues.includes(child.props.value);
 
                     const reference =
@@ -241,10 +238,13 @@ class OptionGroup extends React.Component<{
                             ? (node: Element) => (this.focusedElement = node)
                             : null;
 
+                    // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                     return React.cloneElement(child, {
+                        // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                         ...child.props,
                         key: index,
                         selected: selected,
+                        // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                         onClick: () => onSelected(child.props.value),
                         optionRenderer: optionRenderer,
                         ref: reference,

package/src/components/{form-wrapped-text-field.jsx → form-wrapped-text-field.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * DEPRECATED: Use <TextField> from ./text-field.jsx instead.
  *
@@ -13,27 +12,24 @@ import Color from "@khanacademy/wonder-blocks-color";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-type Props = {|
+type Props = {
     // This id is used to tie the input field to the label that describes it.
     // TODO(diedra): Instead of passing in this id to connect the label and input
     // field, we should pass in the label for the input field and place it
     // inside the <form>.
-    id?: string,
-    testId?: string,
-    type?: string,
-    name?: string,
-    readOnly?: boolean,
-    value?: ?string,
-    placeholder?: string,
+    id?: string;
+    testId?: string;
+    type?: string;
+    name?: string;
+    readOnly?: boolean;
+    value?: string | ReadonlyArray<string> | number | undefined;
+    placeholder?: string;
     // https://reactjs.org/docs/uncontrolled-components.html#default-values
-    defaultValue?: ?string,
-    disabled?: boolean,
-    autoFocus?: boolean,
-    maxLength?: number,
-    invalid?: "true" | "false",
-
+    defaultValue?: string | number | ReadonlyArray<string> | undefined;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    maxLength?: number;
+    invalid?: "true" | "false";
     // styling
     // This prop is passed directly to <input>.  This is incorrect since HTML
     // tags don't know what to do with an aphrodite which is typed as:
@@ -44,57 +40,54 @@ type Props = {|
     // }
     // TODO(WB-1026): Update StyleType to reflect the aphrodite type
     // TODO(FEI-3282): Update uses of StyleType in webapp to be correct
-    style?: StyleType,
-    className?: string,
-    width?: number | string,
-    grow?: boolean | number,
-    shrink?: boolean | number,
+    style?: React.CSSProperties | undefined;
+    className?: string;
+    width?: number | string;
+    grow?: boolean | number;
+    shrink?: boolean | number;
     // HACK(mattmorgan) to enforce WB LabelMedium-like styles on this older
     // component.
-    labelMediumInputText?: boolean,
-    icon?: React.Element<typeof components.Icon>,
-    leftSideIcon?: boolean,
-    backgroundColor?: string,
-    focusBorderColor?: string,
-    borderColor?: string,
-    color?: string,
-
+    labelMediumInputText?: boolean;
+    icon?: React.ReactElement<React.ComponentProps<typeof components.Icon>>;
+    leftSideIcon?: boolean;
+    backgroundColor?: string;
+    focusBorderColor?: string;
+    borderColor?: string;
+    color?: string;
     // events
-    onSubmit?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
-    onBlur?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
-    onFocus?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
-    onChange?: (SyntheticInputEvent<HTMLInputElement>) => mixed,
-    onClick?: (SyntheticMouseEvent<HTMLInputElement>) => mixed,
-    onKeyPress?: (SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-    onKeyDown?: (SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
-
+    onSubmit?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onClick?: (arg1: React.MouseEvent<HTMLInputElement>) => unknown;
+    onKeyPress?: (arg1: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    onKeyDown?: (arg1: React.KeyboardEvent<HTMLInputElement>) => unknown;
     // aria
-    "aria-label"?: string,
-    "aria-describedby"?: ?string,
-|};
+    ["aria-label"]?: string;
+    ["aria-describedby"]?: string | undefined;
+};
 
-type State = {|
-    focused: boolean,
-|};
+type State = {
+    focused: boolean;
+};
 
-type PropsWithForwardRef = {|
-    ...Props,
-    forwardedRef: React.Ref<"input">,
-|};
+type PropsWithForwardRef = Props & {
+    forwardedRef: React.ForwardedRef<HTMLInputElement>;
+};
 
 class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
     state = {
         focused: false,
     };
 
-    handleBlur = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    handleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
         const {onBlur} = this.props;
         onBlur && onBlur(e);
 
         this.setState({focused: false});
     };
 
-    handleFocus = (e: SyntheticInputEvent<HTMLInputElement>) => {
+    handleFocus = (e: React.ChangeEvent<HTMLInputElement>) => {
         const {onFocus} = this.props;
         onFocus && onFocus(e);
 
@@ -169,8 +162,9 @@ class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
         // the form.
         return (
             <form
-                className={css(spanStyle)}
+                className={css(...spanStyle)}
                 style={extraStyles}
+                // @ts-expect-error [FEI-5003] - TS2322 - Type '((arg1: ChangeEvent<HTMLInputElement>) => unknown) | ((e: Event) => void)' is not assignable to type 'FormEventHandler<HTMLFormElement> | undefined'.
                 onSubmit={onSubmit || this.disableDefault}
             >
                 {leftSideIcon && wrappedIcon}
@@ -243,6 +237,6 @@ const styles = StyleSheet.create({
     },
 });
 
-export default (React.forwardRef<Props, HTMLInputElement>((props, ref) => (
+export default React.forwardRef<HTMLInputElement, Props>((props, ref) => (
     <FormWrappedTextField {...props} forwardedRef={ref} />
-)): React$AbstractComponent<Props, HTMLInputElement>);
+));

package/src/components/{graph-settings.jsx → graph-settings.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
-// @flow
 import {
     components,
     interactiveSizes,
@@ -21,13 +20,12 @@ const defaultBackgroundImage = {
     url: null,
     width: 0,
     height: 0,
-};
+} as const;
 
-function numSteps(range, step) {
+function numSteps(range: any, step: any) {
     return Math.floor((range[1] - range[0]) / step);
 }
 
-// $FlowFixMe[signature-verification-failure]
 const GraphSettings = createReactClass({
     displayName: "GraphSettings",
 
@@ -121,7 +119,6 @@ const GraphSettings = createReactClass({
     },
 
     change(...args) {
-        // $FlowFixMe[object-this-reference]
         return Changeable.change.apply(this, args);
     },
 
@@ -141,7 +138,7 @@ const GraphSettings = createReactClass({
             return;
         }
 
-        const setUrl = (url, width, height) => {
+        const setUrl = (url, width: number, height: number) => {
             const image = _.clone(this.props.backgroundImage);
             image.url = url;
             image.width = width;
@@ -154,8 +151,7 @@ const GraphSettings = createReactClass({
             );
         };
 
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
+        // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
         const url = ReactDOM.findDOMNode(this.refs["bg-url"]).value; // eslint-disable-line react/no-string-refs
         if (url) {
             Util.getImageSize(url, (width, height) => {

package/src/components/{hover-behavior.jsx → hover-behavior.ts}

@@ -1,5 +1,4 @@
 /* eslint-disable react/sort-comp */
-// @flow
 /**
  * Add hover behavior to another component.
  *
@@ -46,35 +45,35 @@
  */
 import * as React from "react";
 
-type Handlers = {|
-    onBlur: () => mixed,
-    onClick: (e: SyntheticMouseEvent<>) => mixed,
-    onFocus: () => mixed,
-    onMouseDown: () => mixed,
-    onMouseEnter: () => mixed,
-    onMouseLeave: () => mixed,
-    onTouchStart: () => mixed,
-    onTouchEnd: () => mixed,
-|};
-
-type State = {|
-    focused: boolean,
-    hovered: boolean,
-|};
-
-type Props = {|
-    children?: (state: State, handlers: Handlers) => React.Node,
-    disabled?: boolean,
-    onClick?: (e: SyntheticMouseEvent<>) => mixed,
-    startHovered: boolean,
-    shouldUpdate: () => boolean,
-|};
+type Handlers = {
+    onBlur: () => unknown;
+    onClick: (e: React.MouseEvent) => unknown;
+    onFocus: () => unknown;
+    onMouseDown: () => unknown;
+    onMouseEnter: () => unknown;
+    onMouseLeave: () => unknown;
+    onTouchStart: () => unknown;
+    onTouchEnd: () => unknown;
+};
+
+type State = {
+    focused: boolean;
+    hovered: boolean;
+};
+
+type Props = {
+    children?: (state: State, handlers: Handlers) => React.ReactElement;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent) => unknown;
+    startHovered: boolean;
+    shouldUpdate: () => boolean;
+};
 
 export default class HoverBehavior extends React.Component<Props, State> {
-    static defaultProps: {|
-        shouldUpdate: () => boolean,
-        startHovered: boolean,
-    |} = {
+    static defaultProps: {
+        shouldUpdate: () => boolean;
+        startHovered: boolean;
+    } = {
         startHovered: false,
         shouldUpdate: () => true,
     };
@@ -88,12 +87,12 @@ export default class HoverBehavior extends React.Component<Props, State> {
         };
     }
 
+    // @ts-expect-error [FEI-5003] - TS2564 - Property 'focusFlag' has no initializer and is not definitely assigned in the constructor.
     focusFlag: boolean;
+    // @ts-expect-error [FEI-5003] - TS2564 - Property 'waitingForClick' has no initializer and is not definitely assigned in the constructor.
     waitingForClick: boolean;
 
-    handleClick: (e: SyntheticMouseEvent<>) => void = (
-        e: SyntheticMouseEvent<>,
-    ) => {
+    handleClick: (e: React.MouseEvent) => void = (e: React.MouseEvent) => {
         if (!this.props.disabled) {
             if (this.props.shouldUpdate()) {
                 this.waitingForClick = false;
@@ -160,7 +159,7 @@ export default class HoverBehavior extends React.Component<Props, State> {
         }
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const handlers = {
             onBlur: this.handleBlur,
             onClick: this.handleClick,
@@ -170,7 +169,7 @@ export default class HoverBehavior extends React.Component<Props, State> {
             onMouseLeave: this.handleMouseLeave,
             onTouchStart: this.handleTouchStart,
             onTouchEnd: this.handleTouchEnd,
-        };
+        } as const;
 
         const {children} = this.props;
         return children?.(this.state, handlers) || null;

package/src/components/{json-editor.jsx → json-editor.tsx}

@@ -2,7 +2,6 @@
 /* eslint-disable @babel/no-invalid-this */
 /* eslint-disable react/no-unsafe */
 /* eslint-disable react/sort-comp */
-// @flow
 import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
@@ -76,10 +75,11 @@ const JsonEditor: any = createReactClass({
                     valid: true,
                 },
                 function () {
+                    // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                     this.props.onChange(json);
                 },
             );
-        } catch (ex) {
+        } catch (ex: any) {
             this.setState({
                 currentValue: nextString,
                 valid: false,
@@ -106,10 +106,11 @@ const JsonEditor: any = createReactClass({
                     valid: true,
                 },
                 function () {
+                    // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                     this.props.onChange(json);
                 },
             );
-        } catch (ex) {
+        } catch (ex: any) {
             this.setState({
                 currentValue: JSON.stringify(this.props.value, null, 4),
                 valid: true,

package/src/components/{link.jsx → link.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * A generic link that removes common link styles.
  *
@@ -15,53 +14,54 @@ import type {CSSProperties} from "aphrodite";
 // button styling (backgroundColor, border, and padding).
 const DEFAULT_HREF = "javascript:void(0)";
 
-type DefaultProps = {|
-    element: string | React.AbstractComponent<any>,
+type DefaultProps = {
+    element: React.ElementType;
     // Whether the link should appear in a 'highlighted' state. In
     // practice, this will apply the same styles that are applied on-hover.
-    highlighted: boolean,
-    href: string,
+    highlighted: boolean;
+    href: string;
     // Pass through styles but also add our own to normalize
-    style: CSSProperties | Array<CSSProperties>,
-|};
+    style: CSSProperties | Array<CSSProperties>;
+};
 
-type LinkProps = {|
-    ...DefaultProps,
-    children?: React.Node,
+type LinkProps = DefaultProps & {
+    children?: React.ReactNode;
     // An additional class name to add. This is supported so-as to allow
     // Perseus to add class-based styles to links when using this
     // component as its base link class.
-    className?: string,
+    className?: string;
     // Additional direct styles to add.
-    inlineStyles?: {[key: string]: any, ...},
+    inlineStyles?: {
+        [key: string]: any;
+    };
     // Optional referrer query parameter to add to the end of the URL, used
     // for analytics purposes.
-    referrer?: string,
+    referrer?: string;
     // A target window to open a link in
-    target?: string,
+    target?: string;
     // The relationship between the linked page and the current page.
     // Mostly used to prevent abuse from linked sites.
-    rel?: string,
+    rel?: string;
     // The data-test-id attribute
-    testId?: string,
+    testId?: string;
     // Specify either an HTML tag (like "a") or a React component (like
     // React Router's `Link`) to be used as the underlying element.
 
-    onClick?: (e: SyntheticMouseEvent<>) => mixed,
-    onMouseOver?: (e: SyntheticMouseEvent<>) => mixed,
-    onMouseLeave?: (e: SyntheticMouseEvent<>) => mixed,
-    onMouseEnter?: (e: SyntheticMouseEvent<>) => mixed,
-    onBlur?: (e: SyntheticEvent<>) => mixed,
-    onFocus?: (e: SyntheticEvent<>) => mixed,
-    onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
-    "aria-label"?: string,
-    "aria-selected"?: boolean,
-    "aria-current"?: boolean,
-    role?: "tab",
-    title?: string,
-    id?: string,
-    tabIndex?: number,
-|};
+    onClick?: (e: React.MouseEvent) => unknown;
+    onMouseOver?: (e: React.MouseEvent) => unknown;
+    onMouseLeave?: (e: React.MouseEvent) => unknown;
+    onMouseEnter?: (e: React.MouseEvent) => unknown;
+    onBlur?: (e: React.SyntheticEvent) => unknown;
+    onFocus?: (e: React.SyntheticEvent) => unknown;
+    onKeyDown?: (e: React.KeyboardEvent) => unknown;
+    ["aria-label"]?: string;
+    ["aria-selected"]?: boolean;
+    ["aria-current"]?: boolean;
+    role?: "tab";
+    title?: string;
+    id?: string;
+    tabIndex?: number;
+};
 
 /**
  * A wrapper that creates an anchor tag with normalized styles
@@ -70,11 +70,11 @@ class Link extends React.Component<LinkProps> {
     static defaultProps: DefaultProps = {
         highlighted: false,
         href: DEFAULT_HREF,
-        style: ([]: Array<CSSProperties>),
+        style: [] as Array<CSSProperties>,
         element: "a",
     };
 
-    render(): React.Element<string> | React.Node {
+    render(): React.ReactNode {
         const {
             children,
             className,

package/src/components/{simple-button.jsx → simple-button.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Provides a simple styled button
  *
@@ -8,20 +7,20 @@ import {StyleSheet, css} from "aphrodite";
 import PropTypes from "prop-types";
 import * as React from "react";
 
-class SimpleButton extends React.Component<$FlowFixMe> {
+class SimpleButton extends React.Component<any> {
     static propTypes = {
         children: PropTypes.node,
         color: PropTypes.oneOf(["orange", "green"]),
         onClick: PropTypes.func,
     };
 
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: any = {
         children: null,
         color: "green",
         onClick: () => {},
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {children, color, onClick, ...otherProps} = this.props;
         return (
             <div