@khanacademy/perseus-editor 1.1.0 → 2.0.0

package/src/widgets/label-image/{question-markers.jsx → question-markers.tsx}

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Controlled component to display question image and create markers to
  * label image with answers from list of choices.
@@ -8,48 +7,44 @@ import {Util, Dependencies, globalStyles} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import Marker from "./marker.jsx";
+import Marker from "./marker";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, typography} = globalStyles;
 
-type QuestionMarkersProps = {|
+type QuestionMarkersProps = {
     // The list of possible answers in a specific order.
-    choices: $ReadOnlyArray<string>,
-
+    choices: ReadonlyArray<string>;
     // The question image properties.
-    imageUrl: string,
-    imageWidth: number,
-    imageHeight: number,
-
+    imageUrl: string;
+    imageWidth: number;
+    imageHeight: number;
     // The list of markers placed on the question image.
-    markers: $ReadOnlyArray<MarkerType>,
-
+    markers: ReadonlyArray<MarkerType>;
     // Callback for when any of markers change.
-    onChange: (markers: $ReadOnlyArray<MarkerType>) => void,
-|};
+    onChange: (markers: ReadonlyArray<MarkerType>) => void;
+};
 
 export default class QuestionMarkers extends React.Component<QuestionMarkersProps> {
-    // eslint-disable-next-line ft-flow/no-mutable-array
-    _markers: Array<?Marker> = [];
+    _markers: Array<Marker | null | undefined> = [];
 
-    openDropdownForMarkerIndices(indices: $ReadOnlyArray<number>) {
+    openDropdownForMarkerIndices(indices: ReadonlyArray<number>) {
         // Open answer selection dropdown for each of the specified markers.
         indices.forEach((index) => {
             if (this._markers[index]) {
+                // @ts-expect-error [FEI-5003] - TS2533 - Object is possibly 'null' or 'undefined'.
                 this._markers[index].openDropdown();
             }
         });
     }
 
-    handleImageDoubleClick: (e: SyntheticMouseEvent<>) => void = (
-        e: SyntheticMouseEvent<>,
+    handleImageDoubleClick: (e: React.MouseEvent) => void = (
+        e: React.MouseEvent,
     ) => {
         e.preventDefault();
 
-        const rect =
-            ((e.currentTarget: any): HTMLElement).getBoundingClientRect();
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
 
         // Calculate marker position on the question image as percentage offset
         // rounded to one decimal place.
@@ -72,7 +67,7 @@ export default class QuestionMarkers extends React.Component<QuestionMarkersProp
         ]);
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {choices, imageUrl, imageWidth, imageHeight, markers, onChange} =
             this.props;
 

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Controlled component for selecting the question image, for answer labeling.
  */
@@ -8,22 +7,21 @@ import Button from "@khanacademy/wonder-blocks-button";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import FormWrappedTextField from "../../components/form-wrapped-text-field.jsx";
+import FormWrappedTextField from "../../components/form-wrapped-text-field";
 
 const {colors, typography} = globalStyles;
 
 type SelectImageProps = {
     // Callback for when image URL is changed.
-    onChange: (url: string) => void,
+    onChange: (url: string) => void;
     // The selected image URL.
-    url: string,
-    ...
+    url: string;
 };
 
-const SelectImage = ({
+const SelectImage: React.FC<SelectImageProps> = ({
     onChange,
     url,
-}: SelectImageProps): React.Element<"div"> => (
+}): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Image</div>
 

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Direct image labeling widget editor.
  *
@@ -11,51 +10,46 @@ import {EditorJsonify, Util} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import FormWrappedTextField from "../components/form-wrapped-text-field.jsx";
+import FormWrappedTextField from "../components/form-wrapped-text-field";
 
-import AnswerChoices from "./label-image/answer-choices.jsx";
-import Behavior from "./label-image/behavior.jsx";
-import QuestionMarkers from "./label-image/question-markers.jsx";
-import SelectImage from "./label-image/select-image.jsx";
+import AnswerChoices from "./label-image/answer-choices";
+import Behavior from "./label-image/behavior";
+import QuestionMarkers from "./label-image/question-markers";
+import SelectImage from "./label-image/select-image";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
-type LabelImageEditorProps = {|
+type LabelImageEditorProps = {
     // List of answer choices to label question image with.
-    choices: $ReadOnlyArray<string>,
-
+    choices: ReadonlyArray<string>;
     // The question image properties.
-    imageAlt: string,
-    imageUrl: string,
-    imageWidth: number,
-    imageHeight: number,
-
+    imageAlt: string;
+    imageUrl: string;
+    imageWidth: number;
+    imageHeight: number;
     // The list of label markers on the question image.
-    markers: $ReadOnlyArray<MarkerType>,
-
+    markers: ReadonlyArray<MarkerType>;
     // Whether multiple answer choices may be selected for markers.
-    multipleAnswers: boolean,
-
+    multipleAnswers: boolean;
     // Whether to hide answer choices from user instructions.
-    hideChoicesFromInstructions: boolean,
-
+    hideChoicesFromInstructions: boolean;
     // Callback for when a widget prop is changed.
-    onChange: (options: Object) => void,
-|};
+    onChange: (options: any) => void;
+};
 
 class LabelImageEditor extends React.Component<LabelImageEditorProps> {
-    _questionMarkers: ?QuestionMarkers;
-
-    static defaultProps: {|
-        choices: $ReadOnlyArray<any>,
-        hideChoicesFromInstructions: boolean,
-        imageAlt: string,
-        imageHeight: number,
-        imageUrl: string,
-        imageWidth: number,
-        markers: $ReadOnlyArray<any>,
-        multipleAnswers: boolean,
-    |} = {
+    _questionMarkers: QuestionMarkers | null | undefined;
+
+    static defaultProps: {
+        choices: ReadonlyArray<any>;
+        hideChoicesFromInstructions: boolean;
+        imageAlt: string;
+        imageHeight: number;
+        imageUrl: string;
+        imageWidth: number;
+        markers: ReadonlyArray<any>;
+        multipleAnswers: boolean;
+    } = {
         choices: [],
         imageAlt: "",
         imageUrl: "",
@@ -66,10 +60,10 @@ class LabelImageEditor extends React.Component<LabelImageEditorProps> {
         hideChoicesFromInstructions: false,
     };
 
-    static widgetName: string = "label-image";
+    static widgetName = "label-image" as const;
 
     componentDidUpdate(prevProps: LabelImageEditorProps) {
-        const coordsToMarkers = {};
+        const coordsToMarkers: Record<string, any> = {};
 
         prevProps.markers.forEach(
             (marker) => (coordsToMarkers[`${marker.x}.${marker.y}`] = marker),
@@ -92,10 +86,10 @@ class LabelImageEditor extends React.Component<LabelImageEditorProps> {
         }
     }
 
-    getSaveWarnings: () => $ReadOnlyArray<any | string> = () => {
+    getSaveWarnings: () => ReadonlyArray<any | string> = () => {
         const {choices, imageAlt, imageUrl, markers} = this.props;
 
-        const warnings = [];
+        const warnings: Array<string> = [];
 
         if (choices.length < 2) {
             warnings.push("Question requires at least two answer choices");
@@ -168,23 +162,23 @@ class LabelImageEditor extends React.Component<LabelImageEditorProps> {
         this.props.onChange({imageAlt: alt});
     };
 
-    handleChoicesChange: (choices: $ReadOnlyArray<string>) => void = (
-        choices: $ReadOnlyArray<string>,
+    handleChoicesChange: (choices: ReadonlyArray<string>) => void = (
+        choices: ReadonlyArray<string>,
     ) => {
         this.props.onChange({choices});
     };
 
-    handleMarkersChange: (markers: $ReadOnlyArray<MarkerType>) => void = (
-        markers: $ReadOnlyArray<MarkerType>,
+    handleMarkersChange: (markers: ReadonlyArray<MarkerType>) => void = (
+        markers: ReadonlyArray<MarkerType>,
     ) => {
         this.props.onChange({markers});
     };
 
-    handleBehaviorChange: (options: any) => void = (options: Object) => {
+    handleBehaviorChange: (options?: any) => void = (options: any) => {
         this.props.onChange(options);
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {
             choices,
             imageAlt,

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -15,21 +14,21 @@ const CELL_PADDING = 5;
 const TABLE_STYLE = {
     display: "table",
     tableLayout: "fixed",
-};
+} as const;
 
 const ROW_STYLE = {
     display: "table-row",
-};
+} as const;
 
 const CELL_STYLE = {
     display: "table-cell",
     padding: CELL_PADDING,
-};
+} as const;
 
 const BASE_TILE_STYLE = {
     borderRadius: 10,
     cursor: "pointer",
-};
+} as const;
 
 const PATTERNS = {
     plus: () => [
@@ -45,12 +44,12 @@ const PATTERNS = {
     "plus/x": (iter) => {
         return iter % 2 ? PATTERNS.x() : PATTERNS.plus();
     },
-};
+} as const;
 
 /**
  * Clamps value to an integer in the range [min, max]
  */
-const clampToInt = function (value, min, max) {
+const clampToInt = function (value: number, min: number, max: number) {
     value = Math.floor(value);
     value = Math.max(value, min);
     value = Math.min(value, max);
@@ -59,7 +58,10 @@ const clampToInt = function (value, min, max) {
 
 // Returns a copy of the tiles, with tiles flipped according to
 // whether or not their y, x position satisfies the predicate
-const flipTilesPredicate = (oldCells, predicate) => {
+const flipTilesPredicate = (
+    oldCells: any,
+    predicate: (y?: any, x?: any) => boolean,
+) => {
     return _.map(oldCells, (row, y) => {
         return _.map(row, (cell, x) => {
             return predicate(y, x) ? !cell : cell;
@@ -67,7 +69,7 @@ const flipTilesPredicate = (oldCells, predicate) => {
     });
 };
 
-type TileProps = $FlowFixMe;
+type TileProps = any;
 
 // A single glowy cell
 class Tile extends React.Component<TileProps> {
@@ -76,7 +78,7 @@ class Tile extends React.Component<TileProps> {
         size: PropTypes.number.isRequired,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const color = this.props.value ? "#55dd55" : "#115511";
         const style = _.extend({}, BASE_TILE_STYLE, {
             width: this.props.size,
@@ -91,7 +93,7 @@ class Tile extends React.Component<TileProps> {
     };
 }
 
-type TileGridProps = $FlowFixMe;
+type TileGridProps = any;
 
 // A grid of glowy cells
 class TileGrid extends React.Component<TileGridProps> {
@@ -100,7 +102,7 @@ class TileGrid extends React.Component<TileGridProps> {
         size: PropTypes.number.isRequired,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div style={TABLE_STYLE} className="no-select">
                 {_.map(this.props.cells, (row, y) => {
@@ -129,7 +131,7 @@ class TileGrid extends React.Component<TileGridProps> {
     }
 }
 
-type LightsPuzzleEditorProps = $FlowFixMe;
+type LightsPuzzleEditorProps = any;
 
 // The widget editor
 class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
@@ -140,7 +142,7 @@ class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
         gradeIncompleteAsWrong: PropTypes.bool.isRequired,
     };
 
-    static widgetName: "lights-puzzle" = "lights-puzzle";
+    static widgetName = "lights-puzzle" as const;
 
     static defaultProps: LightsPuzzleEditorProps = {
         startCells: [
@@ -163,11 +165,11 @@ class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
         return 0; // default to 0
     };
 
-    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>
@@ -189,6 +191,7 @@ class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
                     Flip pattern:
                     <select
                         value={this.props.flipPattern}
+                        // @ts-expect-error [FEI-5003] - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
                         onChange={this._handlePatternChange}
                     >
                         {_.map(_.keys(PATTERNS), (pattern, i) => {
@@ -224,21 +227,26 @@ class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
         );
     }
 
-    _handlePatternChange: (SyntheticInputEvent<>) => void = (e) => {
-        this.change("flipPattern", e.target.value);
-    };
+    _handlePatternChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void =
+        (e) => {
+            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+            this.change("flipPattern", e.target.value);
+        };
 
-    _changeWidth: (number) => void = (newWidth) => {
+    _changeWidth: (arg1: number) => void = (newWidth) => {
         newWidth = clampToInt(newWidth, 1, MAX_SIZE);
         this._truncateCells(newWidth, this._height());
     };
 
-    _changeHeight: (number) => void = (newHeight) => {
+    _changeHeight: (arg1: number) => void = (newHeight) => {
         newHeight = clampToInt(newHeight, 1, MAX_SIZE);
         this._truncateCells(this._width(), newHeight);
     };
 
-    _truncateCells: (number, number) => void = (newWidth, newHeight) => {
+    _truncateCells: (arg1: number, arg2: number) => void = (
+        newWidth,
+        newHeight,
+    ) => {
         const newCells = _.times(newHeight, (y) => {
             return _.times(newWidth, (x) => {
                 // explicitly cast the result to a boolean with !!
@@ -248,18 +256,20 @@ class LightsPuzzleEditor extends React.Component<LightsPuzzleEditorProps> {
             });
         });
 
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({startCells: newCells});
     };
 
-    _switchTile: (number, number) => void = (tileY, tileX) => {
+    _switchTile: (arg1: number, arg2: number) => void = (tileY, tileX) => {
         const newCells = flipTilesPredicate(this.props.startCells, (y, x) => {
             return y === tileY && x === tileX;
         });
 
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
         this.change({startCells: newCells});
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 }

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/forbid-prop-types, react/sort-comp */
-// @flow
 import {components} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
@@ -7,7 +6,7 @@ import _ from "underscore";
 
 const {InfoTip, PropCheckBox, TextListEditor} = components;
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class MatcherEditor extends React.Component<Props> {
     static propTypes = {
@@ -18,7 +17,7 @@ class MatcherEditor extends React.Component<Props> {
         padding: PropTypes.bool,
     };
 
-    static widgetName: "matcher" = "matcher";
+    static widgetName = "matcher" as const;
 
     static defaultProps: Props = {
         left: ["$x$", "$y$", "$z$"],
@@ -28,7 +27,7 @@ class MatcherEditor extends React.Component<Props> {
         padding: true,
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         return (
             <div className="perseus-matcher-editor">
                 <div>
@@ -116,13 +115,16 @@ class MatcherEditor extends React.Component<Props> {
         );
     }
 
-    onLabelChange: (number, SyntheticInputEvent<>) => void = (index, e) => {
+    onLabelChange: (
+        arg1: number,
+        arg2: React.ChangeEvent<HTMLInputElement>,
+    ) => void = (index, e) => {
         const labels = _.clone(this.props.labels);
         labels[index] = e.target.value;
         this.props.onChange({labels: labels});
     };
 
-    getSaveWarnings: () => $ReadOnlyArray<string> = () => {
+    getSaveWarnings: () => ReadonlyArray<string> = () => {
         if (this.props.left.length !== this.props.right.length) {
             return [
                 "The two halves of the matcher have different numbers" +
@@ -132,7 +134,7 @@ class MatcherEditor extends React.Component<Props> {
         return [];
     };
 
-    serialize: $FlowFixMe = () => {
+    serialize: any = () => {
         return _.pick(
             this.props,
             "left",

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/sort-comp */
-// @flow
 import {
     components,
     Changeable,
@@ -10,7 +9,7 @@ import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
-import Editor from "../editor.jsx";
+import Editor from "../editor";
 
 const {RangeInput} = components;
 const Matrix = MatrixWidget.widget;
@@ -19,7 +18,7 @@ const Matrix = MatrixWidget.widget;
 // have to cap it at some point.
 const MAX_BOARD_SIZE = 6;
 
-const getMatrixSize = function (matrix) {
+const getMatrixSize = function (matrix: any) {
     const matrixSize = [1, 1];
 
     // We need to find the widest row and tallest column to get the correct
@@ -43,7 +42,7 @@ const getMatrixSize = function (matrix) {
     return matrixSize;
 };
 
-type Props = $FlowFixMe;
+type Props = any;
 
 class MatrixEditor extends React.Component<Props> {
     static propTypes = {
@@ -55,7 +54,7 @@ class MatrixEditor extends React.Component<Props> {
         cursorPosition: PropTypes.arrayOf(PropTypes.number),
     };
 
-    static widgetName: "matrix" = "matrix";
+    static widgetName = "matrix" as const;
 
     static defaultProps: Props = {
         matrixBoardSize: [3, 3],
@@ -65,7 +64,7 @@ class MatrixEditor extends React.Component<Props> {
         cursorPosition: [0, 0],
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const matrixProps = _.extend(
             {
                 numericInput: true,
@@ -100,6 +99,7 @@ class MatrixEditor extends React.Component<Props> {
                         content={this.props.prefix}
                         widgetEnabled={false}
                         onChange={(newProps) => {
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             this.change({prefix: newProps.content});
                         }}
                     />
@@ -114,6 +114,7 @@ class MatrixEditor extends React.Component<Props> {
                         content={this.props.suffix}
                         widgetEnabled={false}
                         onChange={(newProps) => {
+                            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 1.
                             this.change({suffix: newProps.content});
                         }}
                     />
@@ -122,11 +123,11 @@ class MatrixEditor 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);
     };
 
-    onMatrixBoardSizeChange: ([number, number]) => void = (range) => {
+    onMatrixBoardSizeChange: (arg1: [number, number]) => void = (range) => {
         const matrixSize = getMatrixSize(this.props.answers);
         if (range[0] !== null && range[1] !== null) {
             range = [
@@ -147,7 +148,7 @@ class MatrixEditor extends React.Component<Props> {
         }
     };
 
-    serialize: () => $FlowFixMe = () => {
+    serialize: () => any = () => {
         return EditorJsonify.serialize.call(this);
     };
 }