@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/widgets/{graded-group-set-editor.jsx → graded-group-set-editor.tsx}

@@ -1,17 +1,16 @@
 /* eslint-disable react/forbid-prop-types, react/no-unsafe */
-// @flow
 import {ApiOptions, Changeable} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import GradedGroupEditor from "./graded-group-editor.jsx";
+import GradedGroupEditor from "./graded-group-editor";
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class GradedGroupSetEditor extends React.Component<Props> {
-    // eslint-disable-next-line ft-flow/no-mutable-array
-    _editors: Array<$FlowFixMe>;
+    // @ts-expect-error [FEI-5003] - TS2564 - Property '_editors' has no initializer and is not definitely assigned in the constructor.
+    _editors: Array<any>;
 
     static propTypes = {
         ...Changeable.propTypes,
@@ -20,7 +19,7 @@ class GradedGroupSetEditor extends React.Component<Props> {
         onChange: PropTypes.func.isRequired,
     };
 
-    static widgetName: "graded-group-set" = "graded-group-set";
+    static widgetName = "graded-group-set" as const;
 
     static defaultProps: Props = {
         gradedGroups: [],
@@ -31,11 +30,11 @@ class GradedGroupSetEditor extends React.Component<Props> {
         this._editors = [];
     }
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    getSaveWarnings: () => $ReadOnlyArray<$FlowFixMe> = () => {
+    getSaveWarnings: () => ReadonlyArray<any> = () => {
         return [].concat(
             ...this._editors.map((editor) =>
                 editor ? editor.getSaveWarnings() : [],
@@ -43,13 +42,15 @@ class GradedGroupSetEditor extends React.Component<Props> {
         );
     };
 
-    serialize: () => {|gradedGroups: $FlowFixMe|} = () => {
+    serialize: () => {
+        gradedGroups: any;
+    } = () => {
         return {
             gradedGroups: this.props.gradedGroups,
         };
     };
 
-    renderGroups: () => React.Node = () => {
+    renderGroups: () => React.ReactElement = () => {
         if (!this.props.gradedGroups) {
             return null;
         }
@@ -62,6 +63,7 @@ class GradedGroupSetEditor extends React.Component<Props> {
                 widgetEnabled={true}
                 immutableWidgets={false}
                 onChange={(data) =>
+                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
                     this.change(
                         "gradedGroups",
                         setArrayItem(this.props.gradedGroups, i, {
@@ -76,13 +78,14 @@ class GradedGroupSetEditor extends React.Component<Props> {
 
     addGroup: () => void = () => {
         const groups = this.props.gradedGroups || [];
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
         this.change(
             "gradedGroups",
             groups.concat([GradedGroupEditor.defaultProps]),
         );
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-group-editor">
                 {this.renderGroups()}
@@ -92,7 +95,7 @@ class GradedGroupSetEditor extends React.Component<Props> {
     }
 }
 
-const setArrayItem = (list, i, value) => [
+const setArrayItem = (list, i: any, value) => [
     ...list.slice(0, i),
     value,
     ...list.slice(i + 1),

package/src/widgets/{grapher-editor.jsx → grapher-editor.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {
     components,
     Changeable,
@@ -10,7 +9,7 @@ import {
 import * as React from "react";
 import _ from "underscore";
 
-import GraphSettings from "../components/graph-settings.jsx";
+import GraphSettings from "../components/graph-settings";
 
 const {InfoTip, MultiButtonGroup} = components;
 const {containerSizeClass, getInteractiveBoxFromSizeClass} = SizingUtils;
@@ -24,14 +23,14 @@ const {
     typeToButton,
 } = GrapherUtil;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class GrapherEditor extends React.Component<Props> {
     static propTypes = {
         ...Changeable.propTypes,
     };
 
-    static widgetName: "grapher" = "grapher";
+    static widgetName = "grapher" as const;
 
     static defaultProps: Props = {
         correct: DEFAULT_GRAPHER_PROPS.plot,
@@ -39,11 +38,11 @@ class GrapherEditor extends React.Component<Props> {
         availableTypes: DEFAULT_GRAPHER_PROPS.availableTypes,
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const sizeClass = containerSizeClass.SMALL;
         let equationString;
         let graph;
@@ -63,13 +62,14 @@ class GrapherEditor extends React.Component<Props> {
                     this.props.onChange({correct: correct}, cb);
                 },
                 trackInteraction: function () {},
-            };
+            } as const;
 
             graph = (
                 // NOTE(jeremy): This editor doesn't pass in a bunch of
                 // standard props that the Renderer provides normally (eg.
                 // alignment, findWidgets, etc).
                 // $FlowFixMe[prop-missing]
+                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                 <Grapher
                     {...graphProps}
                     apiOptions={this.props.apiOptions}
@@ -111,6 +111,7 @@ class GrapherEditor extends React.Component<Props> {
                     rulerLabel={this.props.graph.rulerLabel}
                     rulerTicks={this.props.graph.rulerTicks}
                     showTooltips={this.props.graph.showTooltips}
+                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                     onChange={this.change("graph")}
                 />
                 <div className="perseus-widget-row">
@@ -127,7 +128,7 @@ class GrapherEditor extends React.Component<Props> {
         );
     }
 
-    handleAvailableTypesChange: ($FlowFixMe) => void = (newAvailableTypes) => {
+    handleAvailableTypesChange = (newAvailableTypes: Array<any>) => {
         let correct = this.props.correct;
 
         // If the currently 'correct' type is removed from the list of types,
@@ -143,7 +144,7 @@ class GrapherEditor extends React.Component<Props> {
         });
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return _.chain(this.props)
             .pick("correct", "availableTypes")
             .extend({graph: _.omit(this.props.graph, "box")})

package/src/widgets/{group-editor.jsx → group-editor.tsx}

@@ -1,13 +1,12 @@
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
-// @flow
 import {ApiOptions, Changeable} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import Editor from "../editor.jsx";
+import Editor from "../editor";
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class GroupEditor extends React.Component<Props> {
     static propTypes = {
@@ -19,7 +18,7 @@ class GroupEditor extends React.Component<Props> {
         apiOptions: ApiOptions.propTypes,
     };
 
-    static widgetName: "group" = "group";
+    static widgetName = "group" as const;
 
     static defaultProps: Props = {
         content: "",
@@ -30,7 +29,7 @@ class GroupEditor extends React.Component<Props> {
         metadata: undefined,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-group-editor">
                 <div>
@@ -53,27 +52,30 @@ class GroupEditor extends React.Component<Props> {
         );
     }
 
-    _renderMetadataEditor: () => React.Node = () => {
+    _renderMetadataEditor: () => React.ReactElement = () => {
         const GroupMetadataEditor = this.props.apiOptions.GroupMetadataEditor;
         return (
             <GroupMetadataEditor
                 value={this.props.metadata}
+                // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                 onChange={this.change("metadata")}
             />
         );
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    getSaveWarnings: () => $ReadOnlyArray<$FlowFixMe> = () => {
+    getSaveWarnings: () => ReadonlyArray<any> = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'getSaveWarnings' does not exist on type 'ReactInstance'.
         return this.refs.editor.getSaveWarnings();
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'serialize' does not exist on type 'ReactInstance'.
         return _.extend({}, this.refs.editor.serialize(), {
             metadata: this.props.metadata,
         });

package/src/widgets/{iframe-editor.jsx → iframe-editor.tsx}

@@ -1,15 +1,14 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import BlurInput from "../components/blur-input.jsx";
+import BlurInput from "../components/blur-input";
 
 const {PropCheckBox} = components;
 
-type PairEditorProps = $FlowFixMe;
+type PairEditorProps = any;
 
 /**
  * This is used for editing a name/value pair.
@@ -30,7 +29,7 @@ class PairEditor extends React.Component<PairEditorProps> {
         return Changeable.change.apply(this, args);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <fieldset>
                 <label>
@@ -58,7 +57,7 @@ class PairEditor extends React.Component<PairEditorProps> {
     };
 }
 
-type PairsEditorProps = $FlowFixMe;
+type PairsEditorProps = any;
 
 /**
  * This is used for editing a set of name/value pairs.
@@ -74,7 +73,7 @@ class PairsEditor extends React.Component<PairsEditorProps> {
         ).isRequired,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const editors = _.map(this.props.pairs, (pair, i) => {
             return (
                 <PairEditor
@@ -93,7 +92,7 @@ class PairsEditor extends React.Component<PairsEditorProps> {
         return Changeable.change.apply(this, args);
     };
 
-    handlePairChange = (pairIndex, pair) => {
+    handlePairChange = (pairIndex: any, pair: any) => {
         // If they're both non empty, add a new one
         const pairs = this.props.pairs.slice();
         pairs[pairIndex] = pair;
@@ -110,7 +109,7 @@ class PairsEditor extends React.Component<PairsEditorProps> {
     };
 }
 
-type IframeEditorProps = $FlowFixMe;
+type IframeEditorProps = any;
 
 /**
  * This is the main editor for this widget, to specify all the options.
@@ -120,7 +119,7 @@ class IframeEditor extends React.Component<IframeEditorProps> {
         ...Changeable.propTypes,
     };
 
-    static widgetName: "iframe" = "iframe";
+    static widgetName = "iframe" as const;
 
     static defaultProps: IframeEditorProps = {
         url: "",
@@ -131,11 +130,11 @@ class IframeEditor extends React.Component<IframeEditorProps> {
         allowTopNavigation: false,
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 <div style={{fontWeight: "bold", textAlign: "center"}}>
@@ -146,6 +145,7 @@ class IframeEditor extends React.Component<IframeEditorProps> {
                     Url or Program ID:
                     <BlurInput
                         value={this.props.url}
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("url")}
                     />
                 </label>
@@ -163,6 +163,7 @@ class IframeEditor extends React.Component<IframeEditorProps> {
                     Width:
                     <BlurInput
                         value={this.props.width}
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("width")}
                     />
                 </label>
@@ -170,6 +171,7 @@ class IframeEditor extends React.Component<IframeEditorProps> {
                     Height:
                     <BlurInput
                         value={this.props.height}
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                         onChange={this.change("height")}
                     />
                 </label>
@@ -188,11 +190,12 @@ class IframeEditor extends React.Component<IframeEditorProps> {
         );
     }
 
-    handleSettingsChange: ($FlowFixMe) => void = (settings) => {
+    handleSettingsChange: (arg1: any) => void = (settings) => {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({settings: settings.pairs});
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 }

package/src/widgets/{image-editor.jsx → image-editor.tsx}

@@ -1,5 +1,4 @@
 /* eslint-disable jsx-a11y/anchor-is-valid, react/sort-comp */
-// @flow
 import {
     components,
     icons,
@@ -11,8 +10,8 @@ import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
-import BlurInput from "../components/blur-input.jsx";
-import Editor from "../editor.jsx";
+import BlurInput from "../components/blur-input";
+import Editor from "../editor";
 
 const {InfoTip, InlineIcon, RangeInput} = components;
 
@@ -22,7 +21,7 @@ const defaultBackgroundImage = {
     url: null,
     width: 0,
     height: 0,
-};
+} as const;
 
 // Match any image URL (including "web+graphie" links) that is hosted by KA.
 // We're somewhat generous in our AWS URL matching
@@ -54,7 +53,7 @@ const captionAlignments = [
     "above left",
 ];
 
-const ImageEditor: $FlowFixMe = createReactClass({
+const ImageEditor: any = createReactClass({
     displayName: "ImageEditor",
 
     propTypes: {
@@ -214,7 +213,6 @@ const ImageEditor: $FlowFixMe = createReactClass({
     },
 
     change(...args) {
-        // $FlowFixMe[object-this-reference]
         return Changeable.change.apply(this, args);
     },
 
@@ -318,7 +316,6 @@ const ImageEditor: $FlowFixMe = createReactClass({
     },
 
     serialize() {
-        // $FlowFixMe[object-this-reference]
         return EditorJsonify.serialize.call(this);
     },
 });

package/src/widgets/{input-number-editor.jsx → input-number-editor.tsx}

@@ -1,11 +1,10 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {components, Util, InputNumber} from "@khanacademy/perseus";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import BlurInput from "../components/blur-input.jsx";
+import BlurInput from "../components/blur-input";
 
 import type {ParsedValue} from "@khanacademy/perseus";
 
@@ -44,44 +43,57 @@ const answerTypes = {
         name: "Numbers with pi",
         forms: "pi",
     },
-};
+} as const;
 
-type Props = {|
-    value: number,
-    simplify: React.ElementConfig<typeof InputNumber.widget>["simplify"],
-    size: React.ElementConfig<typeof InputNumber.widget>["size"],
-    inexact: React.ElementConfig<
+type Props = {
+    value: number;
+    simplify: JSX.LibraryManagedAttributes<
         typeof InputNumber.widget,
-    >["reviewModeRubric"]["inexact"],
-    maxError: React.ElementConfig<
+        React.ComponentProps<typeof InputNumber.widget>
+    >["simplify"];
+    size: JSX.LibraryManagedAttributes<
         typeof InputNumber.widget,
-    >["reviewModeRubric"]["maxError"],
-    answerType: React.ElementConfig<typeof InputNumber.widget>["answerType"],
-    rightAlign: React.ElementConfig<typeof InputNumber.widget>["rightAlign"],
-
-    onChange: ({|
-        value?: ParsedValue | 0,
-        simplify?: Props["simplify"],
-        size?: Props["size"],
-        inexact?: Props["inexact"],
-        maxError?: Props["maxError"],
-        answerType?: Props["answerType"],
-        rightAlign?: Props["rightAlign"],
-    |}) => void,
-|};
+        React.ComponentProps<typeof InputNumber.widget>
+    >["size"];
+    inexact: JSX.LibraryManagedAttributes<
+        typeof InputNumber.widget,
+        React.ComponentProps<typeof InputNumber.widget>
+    >["reviewModeRubric"]["inexact"];
+    maxError: JSX.LibraryManagedAttributes<
+        typeof InputNumber.widget,
+        React.ComponentProps<typeof InputNumber.widget>
+    >["reviewModeRubric"]["maxError"];
+    answerType: JSX.LibraryManagedAttributes<
+        typeof InputNumber.widget,
+        React.ComponentProps<typeof InputNumber.widget>
+    >["answerType"];
+    rightAlign: JSX.LibraryManagedAttributes<
+        typeof InputNumber.widget,
+        React.ComponentProps<typeof InputNumber.widget>
+    >["rightAlign"];
+    onChange: (arg1: {
+        value?: ParsedValue | 0;
+        simplify?: Props["simplify"];
+        size?: Props["size"];
+        inexact?: Props["inexact"];
+        maxError?: Props["maxError"];
+        answerType?: Props["answerType"];
+        rightAlign?: Props["rightAlign"];
+    }) => void;
+};
 
-type DefaultProps = {|
-    value: Props["value"],
-    simplify: Props["simplify"],
-    size: Props["size"],
-    inexact: Props["inexact"],
-    maxError: Props["maxError"],
-    answerType: Props["answerType"],
-    rightAlign: Props["rightAlign"],
-|};
+type DefaultProps = {
+    value: Props["value"];
+    simplify: Props["simplify"];
+    size: Props["size"];
+    inexact: Props["inexact"];
+    maxError: Props["maxError"];
+    answerType: Props["answerType"];
+    rightAlign: Props["rightAlign"];
+};
 
 class InputNumberEditor extends React.Component<Props> {
-    static widgetName: "input-number" = "input-number";
+    static widgetName = "input-number" as const;
 
     static defaultProps: DefaultProps = {
         value: 0,
@@ -93,12 +105,12 @@ class InputNumberEditor extends React.Component<Props> {
         rightAlign: false,
     };
 
-    handleAnswerChange: (string) => void = (str) => {
+    handleAnswerChange: (arg1: string) => void = (str) => {
         const value = Util.firstNumericalParse(str) || 0;
         this.props.onChange({value: value});
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const answerTypeOptions = _.map(
             answerTypes,
             function (v, k) {
@@ -132,6 +144,7 @@ class InputNumberEditor extends React.Component<Props> {
                             value={this.props.simplify}
                             onChange={(e) => {
                                 this.props.onChange({
+                                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type '"optional" | "required" | "enforced" | undefined'.
                                     simplify: e.target.value,
                                 });
                             }}
@@ -206,6 +219,7 @@ class InputNumberEditor extends React.Component<Props> {
                     <select
                         value={this.props.answerType}
                         onChange={(e) => {
+                            // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type '"number" | "integer" | "mixed" | "decimal" | "improper" | "percent" | "pi" | "rational" | undefined'.
                             this.props.onChange({answerType: e.target.value});
                         }}
                     >
@@ -226,6 +240,7 @@ class InputNumberEditor extends React.Component<Props> {
                         <select
                             value={this.props.size}
                             onChange={(e) => {
+                                // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type '"small" | "normal" | undefined'.
                                 this.props.onChange({size: e.target.value});
                             }}
                         >
@@ -261,21 +276,20 @@ class InputNumberEditor extends React.Component<Props> {
     }
 
     focus: () => boolean = () => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
+        // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
         ReactDOM.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
         return true;
     };
 
-    serialize: () => {|
-        value: Props["value"],
-        simplify: Props["simplify"],
-        size: Props["size"],
-        inexact: Props["inexact"],
-        maxError: Props["maxError"],
-        answerType: Props["answerType"],
-        rightAlign: Props["rightAlign"],
-    |} = () => ({
+    serialize: () => {
+        value: Props["value"];
+        simplify: Props["simplify"];
+        size: Props["size"];
+        inexact: Props["inexact"];
+        maxError: Props["maxError"];
+        answerType: Props["answerType"];
+        rightAlign: Props["rightAlign"];
+    } = () => ({
         value: this.props.value,
         simplify: this.props.simplify,
         size: this.props.size,

package/src/widgets/interaction/{constraint-editor.jsx → constraint-editor.tsx}

@@ -1,29 +1,27 @@
-// @flow
 import {components, Changeable, Dependencies} from "@khanacademy/perseus";
 import * as React from "react";
 
 const {ButtonGroup, MathInput, NumberInput} = components;
 
-type Props = {|
-    ...Changeable.ChangeableProps,
-    constraint: string,
-    constraintFn: string,
-    constraintXMax: string,
-    constraintXMin: string,
-    constraintYMax: string,
-    constraintYMin: string,
-    snap: number,
-|};
+type Props = Changeable.ChangeableProps & {
+    constraint: string;
+    constraintFn: string;
+    constraintXMax: string;
+    constraintXMin: string;
+    constraintYMax: string;
+    constraintYMin: string;
+    snap: number;
+};
 
-type DefaultProps = {|
-    constraint: Props["constraint"],
-    constraintFn: Props["constraintFn"],
-    constraintXMax: Props["constraintXMax"],
-    constraintXMin: Props["constraintXMin"],
-    constraintYMax: Props["constraintYMax"],
-    constraintYMin: Props["constraintYMin"],
-    snap: Props["snap"],
-|};
+type DefaultProps = {
+    constraint: Props["constraint"];
+    constraintFn: Props["constraintFn"];
+    constraintXMax: Props["constraintXMax"];
+    constraintXMin: Props["constraintXMin"];
+    constraintYMax: Props["constraintYMax"];
+    constraintYMin: Props["constraintYMin"];
+    snap: Props["snap"];
+};
 
 class ConstraintEditor extends React.Component<Props> {
     static defaultProps: DefaultProps = {
@@ -38,14 +36,13 @@ class ConstraintEditor extends React.Component<Props> {
 
     change: (
         propName: string,
-    ) => (value: any, callback?: () => mixed) => mixed = (
+    ) => (value?: any, callback?: () => unknown) => unknown = (
         propName: string,
-    ): ((value: any, callback?: () => mixed) => mixed) => {
-        // $FlowFixMe[incompatible-return](WEB-1727): change is an overloaded function, but we aren't typing it as overloaded
+    ): ((value?: any, callback?: () => unknown) => unknown) => {
         return Changeable.change.call(this, propName);
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {TeX} = Dependencies.getDependencies();
 
         return (