@khanacademy/perseus-editor 1.1.1 → 2.0.0

package/src/util/{register-all-widgets-and-editors-for-testing.js → register-all-widgets-and-editors-for-testing.ts}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Some tests require some or all of the widgets and editors to be registered
  * in order for them to work. Requiring this file will register all of the
@@ -6,8 +5,8 @@
  */
 import {Widgets} from "@khanacademy/perseus";
 
-import allEditors from "../all-editors.js";
-import allWidgets from "../all-widgets.js";
+import allEditors from "../all-editors";
+import allWidgets from "../all-widgets";
 
 export const registerAllWidgetsAndEditorsForTesting = () => {
     Widgets.registerWidgets(allWidgets);

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

@@ -1,20 +1,22 @@
-// @flow
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import LabelImageEditor from "../label-image-editor.jsx";
+import LabelImageEditor from "../label-image-editor";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
-type StoryArgs = {||};
+// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
+type Empty = Record<string, never>;
 
-type Story = {|
-    title: string,
-|};
+type StoryArgs = Record<any, any>;
 
-export default ({
+type Story = {
+    title: string;
+};
+
+export default {
     title: "Perseus/Editor/Widgets/Label Image Editor",
-}: Story);
+} as Story;
 
 const styles = StyleSheet.create({
     wrapper: {
@@ -23,16 +25,17 @@ const styles = StyleSheet.create({
     },
 });
 
-type State = {|
-    imageAlt: string,
-    choices: $ReadOnlyArray<string>,
-    imageUrl: string,
-    imageWidth: number,
-    imageHeight: number,
-    markers: $ReadOnlyArray<MarkerType>,
-|};
+type State = {
+    imageAlt: string;
+    choices: ReadonlyArray<string>;
+    imageUrl: string;
+    imageWidth: number;
+    imageHeight: number;
+    markers: ReadonlyArray<MarkerType>;
+};
 
 class WithState extends React.Component<Empty, State> {
+    // @ts-expect-error [FEI-5003] - TS2564 - Property '_widget' has no initializer and is not definitely assigned in the constructor.
     _widget: LabelImageEditor;
 
     state = {
@@ -71,7 +74,7 @@ class WithState extends React.Component<Empty, State> {
         ],
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className={css(styles.wrapper)}>
                 <LabelImageEditor
@@ -85,6 +88,7 @@ class WithState extends React.Component<Empty, State> {
                     // TODO(mdr): We found a new Flow error when upgrading:
                     //     "widget (null) This type is incompatible with this._widget (LabelImageEditor)"
                     // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
+                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'LabelImageEditor | null' is not assignable to type 'LabelImageEditor'.
                     ref={(widget) => (this._widget = widget)}
                 />
             </div>
@@ -92,6 +96,6 @@ class WithState extends React.Component<Empty, State> {
     }
 }
 
-export const Default = (args: StoryArgs): React.Node => {
+export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <WithState />;
 };

package/src/widgets/__stories__/{radio-editor.stories.jsx → radio-editor.stories.tsx}

@@ -1,8 +1,7 @@
-// @flow
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import RadioEditor from "../radio/editor.jsx";
+import RadioEditor from "../radio/editor";
 
 import type {
     PerseusRadioWidgetOptions,
@@ -10,15 +9,18 @@ import type {
     APIOptions,
 } from "@khanacademy/perseus";
 
-type StoryArgs = {||};
+// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
+type Empty = Record<string, never>;
 
-type Story = {|
-    title: string,
-|};
+type StoryArgs = Record<any, any>;
 
-export default ({
+type Story = {
+    title: string;
+};
+
+export default {
     title: "Perseus/Editor/Widgets/Radio Editor",
-}: Story);
+} as Story;
 
 const styles = StyleSheet.create({
     wrapper: {
@@ -79,14 +81,16 @@ const question: PerseusRenderer = {
 };
 
 class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
+    // @ts-expect-error [FEI-5003] - TS2564 - Property '_widget' has no initializer and is not definitely assigned in the constructor.
     _widget: RadioEditor;
 
     //$FlowIgnore
+    // @ts-expect-error [FEI-5003] - TS2416 - Property 'state' in type 'WithState' is not assignable to the same property in base type 'Component<Empty, PerseusRadioWidgetOptions, any>'.
     state = question.widgets["radio 1"];
 
     apiOptions: APIOptions = Object.freeze({});
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className={css(styles.wrapper)}>
                 <RadioEditor
@@ -99,6 +103,7 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
                         })
                     }
                     // $FlowFixMe[incompatible-type] - can be null
+                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'RadioEditor | null' is not assignable to type 'RadioEditor'.
                     ref={(widget) => (this._widget = widget)}
                 />
             </div>
@@ -106,6 +111,6 @@ class WithState extends React.Component<Empty, PerseusRadioWidgetOptions> {
     }
 }
 
-export const Default = (args: StoryArgs): React.Node => {
+export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <WithState />;
 };

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

@@ -1,4 +1,3 @@
-// @flow
 import {
     components,
     ApiOptions,
@@ -13,7 +12,7 @@ import _ from "underscore";
 const {PropCheckBox, TextListEditor} = components;
 const Categorizer = CategorizerWidget.widget;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class CategorizerEditor extends React.Component<Props> {
     static propTypes = {
@@ -25,7 +24,7 @@ class CategorizerEditor extends React.Component<Props> {
         randomizeItems: PropTypes.bool,
     };
 
-    static widgetName: string = "categorizer";
+    static widgetName = "categorizer" as const;
 
     static defaultProps: Props = {
         items: [],
@@ -34,15 +33,15 @@ class CategorizerEditor extends React.Component<Props> {
         randomizeItems: false,
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 <div className="perseus-widget-row">
@@ -57,6 +56,7 @@ class CategorizerEditor extends React.Component<Props> {
                 <TextListEditor
                     options={this.props.categories}
                     onChange={(cat) => {
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
                         this.change("categories", cat);
                     }}
                     layout="horizontal"
@@ -65,6 +65,7 @@ class CategorizerEditor extends React.Component<Props> {
                 <TextListEditor
                     options={this.props.items}
                     onChange={(items) => {
+                        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                         this.change({
                             items: items,
                             // TODO(eater): This truncates props.values so there
@@ -84,6 +85,7 @@ class CategorizerEditor extends React.Component<Props> {
                     via widget-container.jsx that we aren't passing to Categorizer here.
                     See perseus-all-package/types.js#WidgetProps for details. */}
                 {/* $FlowFixMe[prop-missing] */}
+                {/* @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. */}
                 <Categorizer
                     apiOptions={this.props.apiOptions}
                     items={this.props.items}

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

@@ -1,5 +1,4 @@
 /* eslint-disable no-useless-escape */
-// @flow
 /**
  * This editor is for embedding Khan Academy CS programs.
  */
@@ -17,7 +16,7 @@ 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 {InfoTip, PropCheckBox} = components;
 
@@ -27,7 +26,7 @@ const DEFAULT_HEIGHT = 400;
 /**
  * This is used for editing a name/value pair.
  */
-class PairEditor extends React.Component<$FlowFixMe> {
+class PairEditor extends React.Component<any> {
     static propTypes = {
         ...Changeable.propTypes,
         name: PropTypes.string,
@@ -47,7 +46,7 @@ class PairEditor extends React.Component<$FlowFixMe> {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <fieldset className="pair-editor">
                 <label>
@@ -75,7 +74,7 @@ class PairEditor extends React.Component<$FlowFixMe> {
 /**
  * This is used for editing a set of name/value pairs.
  */
-class PairsEditor extends React.Component<$FlowFixMe> {
+class PairsEditor extends React.Component<any> {
     static propTypes = {
         ...Changeable.propTypes,
         pairs: PropTypes.arrayOf(
@@ -90,7 +89,7 @@ class PairsEditor extends React.Component<$FlowFixMe> {
         return Changeable.change.apply(this, args);
     };
 
-    handlePairChange = (pairIndex, pair) => {
+    handlePairChange = (pairIndex, pair: any) => {
         // If they're both non empty, add a new one
         const pairs = this.props.pairs.slice();
         pairs[pairIndex] = pair;
@@ -106,7 +105,7 @@ class PairsEditor extends React.Component<$FlowFixMe> {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const editors = _.map(this.props.pairs, (pair, i) => {
             return (
                 <PairEditor
@@ -129,7 +128,7 @@ const KA_PROGRAM_URL = /khanacademy\.org\/computer-programming\/[^\/]+\/(\d+)/;
  * If the input does not match the known URL patterns, it is assumed to be
  * a program ID.
  */
-function isolateProgramID(programUrl) {
+function isolateProgramID(programUrl: string) {
     const match = KA_PROGRAM_URL.exec(programUrl);
     if (match) {
         programUrl = match[1];
@@ -141,14 +140,14 @@ function isolateProgramID(programUrl) {
 /**
  * This is the main editor for this widget, to specify all the options.
  */
-class CSProgramEditor extends React.Component<$FlowFixMe> {
+class CSProgramEditor extends React.Component<any> {
     static propTypes = {
         ...Changeable.propTypes,
     };
 
-    static widgetName: string = "cs-program";
+    static widgetName = "cs-program" as const;
 
-    static defaultProps: $FlowFixMe = {
+    static defaultProps: any = {
         programID: "",
         programType: null,
         settings: [{name: "", value: ""}],
@@ -158,16 +157,16 @@ class CSProgramEditor extends React.Component<$FlowFixMe> {
         height: DEFAULT_HEIGHT,
     };
 
-    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
-        // $FlowFixMe[incompatible-call]
+    change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
         return Changeable.change.apply(this, args);
     };
 
-    _handleSettingsChange: ($FlowFixMe) => void = (settings) => {
+    _handleSettingsChange: (arg1: any) => void = (settings) => {
         this.change({settings: settings.pairs});
     };
 
-    _handleProgramIDChange: (string) => void = (programID) => {
+    _handleProgramIDChange: (arg1: string) => void = (programID) => {
         programID = isolateProgramID(programID);
         const {isDevServer, InitialRequestUrl} = Dependencies.getDependencies();
 
@@ -191,6 +190,7 @@ class CSProgramEditor extends React.Component<$FlowFixMe> {
                     "Error retrieving scratchpad info for program ID ",
                     Errors.TransientService,
                     {
+                        // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'Error | null | undefined'.
                         cause: error,
                         loggedMetadata: {
                             textStatus,
@@ -207,11 +207,11 @@ class CSProgramEditor extends React.Component<$FlowFixMe> {
             });
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 <label>

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

@@ -1,14 +1,13 @@
-// @flow
 import {components, Changeable, EditorJsonify} 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";
 
 const {TextInput} = components;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class DefinitionEditor extends React.Component<Props> {
     static propTypes = {
@@ -18,22 +17,22 @@ class DefinitionEditor extends React.Component<Props> {
         apiOptions: PropTypes.any,
     };
 
-    static widgetName: string = "definition";
+    static widgetName = "definition" as const;
 
     static defaultProps: Props = {
         togglePrompt: "",
         definition: "",
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-widget-definition-editor">
                 <a
@@ -47,6 +46,7 @@ class DefinitionEditor extends React.Component<Props> {
                         Word to be defined:{" "}
                         <TextInput
                             value={this.props.togglePrompt}
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             onChange={this.change("togglePrompt")}
                             placeholder="define me"
                         />
@@ -59,10 +59,11 @@ class DefinitionEditor extends React.Component<Props> {
                         widgetEnabled={false}
                         placeholder="definition goes here"
                         onChange={(props) => {
-                            const newProps = {};
+                            const newProps: Record<string, any> = {};
                             if (_.has(props, "content")) {
                                 newProps.definition = props.content;
                             }
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             this.change(newProps);
                         }}
                     />

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

@@ -1,4 +1,3 @@
-// @flow
 import {components, icons, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -8,7 +7,7 @@ import _ from "underscore";
 const {InfoTip, InlineIcon} = components;
 const {iconPlus, iconTrash} = icons;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class DropdownEditor extends React.Component<Props> {
     static propTypes = {
@@ -21,7 +20,7 @@ class DropdownEditor extends React.Component<Props> {
         placeholder: PropTypes.string,
     };
 
-    static widgetName: string = "dropdown";
+    static widgetName = "dropdown" as const;
 
     static defaultProps: Props = {
         placeholder: "",
@@ -33,14 +32,17 @@ class DropdownEditor extends React.Component<Props> {
         ],
     };
 
-    onPlaceholderChange: (SyntheticInputEvent<>) => void = (e) => {
+    onPlaceholderChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
         const placeholder = e.target.value;
         this.props.onChange({placeholder: placeholder});
     };
 
-    onCorrectChange: (number, SyntheticInputEvent<>) => void = (
-        choiceIndex,
-    ) => {
+    onCorrectChange: (
+        arg1: number,
+        arg2: React.ChangeEvent<HTMLInputElement>,
+    ) => void = (choiceIndex) => {
         const choices = _.map(this.props.choices, function (choice, i) {
             return _.extend({}, choice, {
                 correct: i === choiceIndex,
@@ -49,10 +51,10 @@ class DropdownEditor extends React.Component<Props> {
         this.props.onChange({choices: choices});
     };
 
-    onContentChange: (number, SyntheticInputEvent<>) => void = (
-        choiceIndex,
-        e,
-    ) => {
+    onContentChange: (
+        arg1: number,
+        arg2: React.ChangeEvent<HTMLInputElement>,
+    ) => void = (choiceIndex, e) => {
         const choices = this.props.choices.slice();
         const choice = _.clone(choices[choiceIndex]);
         choice.content = e.target.value;
@@ -60,11 +62,11 @@ class DropdownEditor extends React.Component<Props> {
         this.props.onChange({choices: choices});
     };
 
-    addChoice: (SyntheticMouseEvent<>) => void = (e) => {
+    addChoice: (arg1: React.MouseEvent) => void = (e) => {
         e.preventDefault();
 
         const choices = this.props.choices;
-        const blankChoice = {content: "", correct: false};
+        const blankChoice = {content: "", correct: false} as const;
         this.props.onChange(
             {
                 choices: choices.concat([blankChoice]),
@@ -73,7 +75,7 @@ class DropdownEditor extends React.Component<Props> {
         );
     };
 
-    removeChoice: (number, SyntheticMouseEvent<>) => void = (
+    removeChoice: (arg1: number, arg2: React.MouseEvent) => void = (
         choiceIndex,
         e,
     ) => {
@@ -85,18 +87,17 @@ class DropdownEditor extends React.Component<Props> {
         });
     };
 
-    focus: (number) => boolean = (i) => {
-        // $FlowFixMe[incompatible-use]
-        // $FlowFixMe[prop-missing]
+    focus: (arg1: number) => boolean = (i) => {
+        // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
         ReactDOM.findDOMNode(this.refs["editor" + i]).focus(); // eslint-disable-line react/no-string-refs
         return true;
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const dropdownGroupName = _.uniqueId("perseus_dropdown_");
         return (
             <div className="perseus-widget-dropdown">
@@ -142,11 +143,14 @@ class DropdownEditor extends React.Component<Props> {
                                         ref={"radio" + i}
                                         type="radio"
                                         name={dropdownGroupName}
+                                        // @ts-expect-error [FEI-5003] - TS2322 - Type 'string' is not assignable to type 'boolean | undefined'.
                                         checked={
                                             choice.correct ? "checked" : ""
                                         }
                                         // eslint-disable-next-line react/jsx-no-bind
+                                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                         onChange={this.onCorrectChange.bind(
+                                            // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                             this,
                                             i,
                                         )}
@@ -156,7 +160,9 @@ class DropdownEditor extends React.Component<Props> {
                                         type="text"
                                         ref={"editor" + i}
                                         // eslint-disable-next-line react/jsx-no-bind
+                                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                         onChange={this.onContentChange.bind(
+                                            // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                             this,
                                             i,
                                         )}
@@ -168,7 +174,9 @@ class DropdownEditor extends React.Component<Props> {
                                         href="#"
                                         className="simple-button orange"
                                         // eslint-disable-next-line react/jsx-no-bind
+                                        // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                         onClick={this.removeChoice.bind(
+                                            // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                                             this,
                                             i,
                                         )}

package/src/widgets/{example-graphie-widget-editor.jsx → example-graphie-widget-editor.tsx}

@@ -1,12 +1,11 @@
-// @flow
 import {Changeable, EditorJsonify} from "@khanacademy/perseus";
 import * as React from "react";
 
-import ExampleGraphie from "./example-graphie-widget.jsx";
+import ExampleGraphie from "./example-graphie-widget";
 
 const ExampleGraphieWidget = ExampleGraphie.widget;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 /**
  * This is the widget's editor. This is what shows up on the left side
@@ -17,7 +16,7 @@ class ExampleGraphieWidgetEditor extends React.Component<Props> {
         ...Changeable.propTypes,
     };
 
-    static widgetName: "example-graphie-widget" = "example-graphie-widget";
+    static widgetName = "example-graphie-widget" as const;
 
     static defaultProps: Props = {
         correct: [4, 4],
@@ -37,23 +36,24 @@ class ExampleGraphieWidgetEditor extends React.Component<Props> {
         },
     };
 
-    change: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => $FlowFixMe = (...args) => {
+    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
         return Changeable.change.apply(this, args);
     };
 
-    handleChange: ($FlowFixMe) => void = (newProps) => {
+    handleChange: (arg1: any) => void = (newProps) => {
         if (newProps.coord) {
+            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
             this.change({
                 correct: newProps.coord,
             });
         }
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div>
                 <ExampleGraphieWidget