@khanacademy/perseus-editor 1.1.0 → 2.0.0

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

@@ -1,7 +1,6 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable react/no-unsafe */
 /* eslint-disable react/sort-comp */
-// @flow
 import {
     components,
     interactiveSizes,
@@ -13,26 +12,29 @@ import createReactClass from "create-react-class";
 import * as React from "react";
 import _ from "underscore";
 
-import GraphSettings from "../components/graph-settings.jsx";
+import GraphSettings from "../components/graph-settings";
 
 const {InfoTip} = components;
 const {containerSizeClass, getInteractiveBoxFromSizeClass} = SizingUtils;
 const DeprecationMixin = Util.DeprecationMixin;
 const InteractiveGraph = InteractiveGraphWidget.widget;
 
-type InteractiveGraphProps = React.ElementConfig<typeof InteractiveGraph>;
+type InteractiveGraphProps = JSX.LibraryManagedAttributes<
+    typeof InteractiveGraph,
+    React.ComponentProps<typeof InteractiveGraph>
+>;
 
 const defaultBackgroundImage = {
     url: null,
-};
+} as const;
 
 const deprecatedProps = {
     showGraph: function (props) {
         return {markings: props.showGraph ? "graph" : "none"};
     },
-};
+} as const;
 
-const InteractiveGraphEditor: $FlowFixMe = createReactClass({
+const InteractiveGraphEditor: any = createReactClass({
     displayName: "InteractiveGraphEditor",
     className: "perseus-widget-interactive-graph",
 
@@ -68,7 +70,6 @@ const InteractiveGraphEditor: $FlowFixMe = createReactClass({
 
     // TODO(jangmi, CP-3288): Remove usage of `UNSAFE_componentWillMount`
     UNSAFE_componentWillMount() {
-        // $FlowFixMe[object-this-reference]
         DeprecationMixin.UNSAFE_componentWillMount.call(this);
     },
 
@@ -107,7 +108,7 @@ const InteractiveGraphEditor: $FlowFixMe = createReactClass({
                 trackInteraction: function () {},
                 onChange: (newProps: InteractiveGraphProps) => {
                     let correct = this.props.correct;
-                    // $FlowFixMe[incompatible-use]
+                    // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
                     if (correct.type === newProps.graph.type) {
                         correct = _.extend({}, correct, newProps.graph);
                     } else {
@@ -116,12 +117,13 @@ const InteractiveGraphEditor: $FlowFixMe = createReactClass({
                     }
                     this.props.onChange({correct: correct});
                 },
-            };
+            } as const;
             graph = (
                 // There are a bunch of props that renderer.jsx passes to widgets via
                 // getWidgetProps() and widget-container.jsx that the editors don't
                 // bother passing.
                 // $FlowFixMe[prop-missing]
+                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                 <InteractiveGraph
                     {...graphProps}
                     containerSizeClass={sizeClass}
@@ -133,7 +135,7 @@ const InteractiveGraphEditor: $FlowFixMe = createReactClass({
             );
             // TODO(kevinb): Update getEquationString to only accept the data it actually
             // needs to compute the equation string.
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type '{ readonly ref: "graph"; readonly box: any; readonly range: any; readonly labels: any; readonly step: any; readonly gridStep: any; readonly snapStep: any; readonly graph: any; readonly backgroundImage: any; ... 6 more ...; readonly onChange: (newProps: Pick<...> & ... 1 more ... & InexactPartial<...>) => void; }' is not assignable to parameter of type 'Props'.
             equationString = InteractiveGraph.getEquationString(graphProps);
         } else {
             graph = <div className="perseus-error">{this.props.valid}</div>;
@@ -310,6 +312,7 @@ const InteractiveGraphEditor: $FlowFixMe = createReactClass({
                 ],
                 function (key) {
                     if (_.has(correct, key)) {
+                        // @ts-expect-error [FEI-5003] - TS2339 - Property 'graph' does not exist on type 'Pick<any, "step" | "range" | "backgroundImage" | "snapStep" | "labels" | "showTooltips" | "markings" | "gridStep" | "showProtractor" | "showRuler" | "rulerLabel" | "rulerTicks">'.
                         json.graph[key] = correct[key];
                     }
                 },

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

@@ -1,19 +1,18 @@
-// @flow
 import {action} from "@storybook/addon-actions";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import AnswerChoices from "../answer-choices.jsx";
+import AnswerChoices from "../answer-choices";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-|};
+type Story = {
+    title: string;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Widgets/Label Image/Answer Choices",
-}: Story);
+} as Story;
 
 const styles = StyleSheet.create({
     wrapper: {
@@ -22,7 +21,7 @@ const styles = StyleSheet.create({
     },
 });
 
-const Wrapper = (props: $FlowFixMe) => {
+const Wrapper = (props: any) => {
     return (
         <div className={css(styles.wrapper)}>
             <AnswerChoices
@@ -37,14 +36,16 @@ const Wrapper = (props: $FlowFixMe) => {
 };
 
 class WithState extends React.Component<
-    {||},
-    {|choices: $ReadOnlyArray<string>|},
+    Record<any, any>,
+    {
+        choices: ReadonlyArray<string>;
+    }
 > {
     state = {
         choices: [],
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {choices} = this.state;
 
         return (
@@ -56,12 +57,16 @@ class WithState extends React.Component<
     }
 }
 
-export const EmptyNonInteractive = (args: StoryArgs): React.Node => {
-    const props = {choices: [], onChange: (...args) => {}};
+export const EmptyNonInteractive: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    const props = {choices: [], onChange: (...args) => {}} as const;
     return <Wrapper {...props} />;
 };
 
-export const FilledNonInteractive = (args: StoryArgs): React.Node => {
+export const FilledNonInteractive: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
     const props = {
         choices: [
             "Lamborghini",
@@ -72,10 +77,10 @@ export const FilledNonInteractive = (args: StoryArgs): React.Node => {
             "Ferrari",
         ],
         onChange: (...args) => {},
-    };
+    } as const;
     return <Wrapper {...props} />;
 };
 
-export const Interactive = (args: StoryArgs): React.Node => {
+export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <WithState />;
 };

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

@@ -1,20 +1,19 @@
-// @flow
 import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
-import Behavior from "../behavior.jsx";
+import Behavior from "../behavior";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-|};
+type Story = {
+    title: string;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Widgets/Label Image/Behavior",
-}: Story);
+} as Story;
 
-export const Default = (args: StoryArgs): React.Node => {
+export const Default: React.FC<StoryArgs> = (args): React.ReactElement => {
     const [state, setState] = React.useState({
         multipleAnswers: false,
         hideChoicesFromInstructions: false,
@@ -27,6 +26,6 @@ export const Default = (args: StoryArgs): React.Node => {
             action("onChange")(newState);
             setState({...state, ...newState});
         },
-    };
+    } as const;
     return <Behavior {...props} />;
 };

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

@@ -1,19 +1,18 @@
-// @flow
 import {action} from "@storybook/addon-actions";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import Marker from "../marker.jsx";
+import Marker from "../marker";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-|};
+type Story = {
+    title: string;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Widgets/Label Image/Marker",
-}: Story);
+} as Story;
 
 const styles = StyleSheet.create({
     wrapper: {
@@ -34,7 +33,7 @@ const Wrapper = (props) => (
     </div>
 );
 
-export const Empty = (args: StoryArgs): React.Node => {
+export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         answers: [],
         choices: [],
@@ -47,11 +46,11 @@ export const Empty = (args: StoryArgs): React.Node => {
         },
         x: 50,
         y: 50,
-    };
+    } as const;
     return <Wrapper {...props} />;
 };
 
-export const WithAnswers = (args: StoryArgs): React.Node => {
+export const WithAnswers: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         answers: ["BMW", "Ferrari"],
         choices: [
@@ -71,6 +70,6 @@ export const WithAnswers = (args: StoryArgs): React.Node => {
         },
         x: 50,
         y: 50,
-    };
+    } as const;
     return <Wrapper {...props} />;
 };

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

@@ -1,20 +1,19 @@
-// @flow
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import QuestionMarkers from "../question-markers.jsx";
+import QuestionMarkers from "../question-markers";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-|};
+type Story = {
+    title: string;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Widgets/Label Image/Question Markers",
-}: Story);
+} as Story;
 
 const styles = StyleSheet.create({
     wrapper: {
@@ -30,8 +29,10 @@ const Wrapper = (props) => (
 );
 
 class WithState extends React.Component<
-    {||},
-    {|markers: $ReadOnlyArray<MarkerType>|},
+    Record<any, any>,
+    {
+        markers: ReadonlyArray<MarkerType>;
+    }
 > {
     state = {
         markers: [
@@ -44,7 +45,7 @@ class WithState extends React.Component<
         ],
     };
 
-    render(): React.Node {
+    render(): React.ReactNode {
         const {markers} = this.state;
 
         return (
@@ -69,7 +70,7 @@ class WithState extends React.Component<
     }
 }
 
-export const Empty = (args: StoryArgs): React.Node => {
+export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl: "",
@@ -77,11 +78,11 @@ export const Empty = (args: StoryArgs): React.Node => {
         imageHeight: 0,
         markers: [],
         onChange: () => {},
-    };
+    } as const;
     return <Wrapper {...props} />;
 };
 
-export const Filled = (args: StoryArgs): React.Node => {
+export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         choices: [],
         imageUrl:
@@ -97,10 +98,10 @@ export const Filled = (args: StoryArgs): React.Node => {
             },
         ],
         onChange: () => {},
-    };
+    } as const;
     return <Wrapper {...props} />;
 };
 
-export const Interactive = (args: StoryArgs): React.Node => {
+export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <WithState />;
 };

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

@@ -1,18 +1,17 @@
-// @flow
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import SelectImage from "../select-image.jsx";
+import SelectImage from "../select-image";
 
-type StoryArgs = {||};
+type StoryArgs = Record<any, any>;
 
-type Story = {|
-    title: string,
-|};
+type Story = {
+    title: string;
+};
 
-export default ({
+export default {
     title: "Perseus/Editor/Widgets/Label Image/Select Image",
-}: Story);
+} as Story;
 
 const styles = StyleSheet.create({
     wrapper: {
@@ -37,24 +36,24 @@ const WithState = () => {
     );
 };
 
-export const Empty = (args: StoryArgs): React.Node => {
+export const Empty: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         url: "",
         onChange: () => {},
-    };
+    } as const;
 
     return <Wrapper {...props} />;
 };
 
-export const Filled = (args: StoryArgs): React.Node => {
+export const Filled: React.FC<StoryArgs> = (args): React.ReactElement => {
     const props = {
         url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
         onChange: () => {},
-    };
+    } as const;
 
     return <Wrapper {...props} />;
 };
 
-export const Interactive = (args: StoryArgs): React.Node => {
+export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
     return <WithState />;
 };

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Controlled list of answer choices, handles adding and removing answers.
  */
@@ -7,47 +6,44 @@ import {components, globalStyles} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import FormWrappedTextField from "../../components/form-wrapped-text-field.jsx";
-import Link from "../../components/link.jsx";
+import FormWrappedTextField from "../../components/form-wrapped-text-field";
+import Link from "../../components/link";
 
 const {colors, typography} = globalStyles;
 const {Icon} = components;
 
 type AddAnswerProps = {
     // Callback to add new answer choice.
-    onClick: () => void,
-    ...
+    onClick: () => void;
 };
 
 type AnswerProps = {
     // The answer string, can be plain text or a KaTeX expression.
-    answer: string,
+    answer: string;
     // Callback for when an answer is changed.
-    onChange: (answer: string) => void,
+    onChange: (answer: string) => void;
     // Callback to remove answer from list of choices.
-    onRemove: () => void,
-    ...
+    onRemove: () => void;
 };
 
 type AnswerChoicesProps = {
     // The list of possible answers in a specific order.
-    choices: $ReadOnlyArray<string>,
+    choices: ReadonlyArray<string>;
     // Callback for when answers change.
-    onChange: (choices: $ReadOnlyArray<string>) => void,
-    ...
+    onChange: (choices: ReadonlyArray<string>) => void;
 };
 
 const addIcon = {
     path: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
     width: 24,
     height: 24,
-};
+} as const;
 
 const removeIcon = {
     path: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z",
     width: 24,
     height: 24,
-};
+} as const;
 
 const DraggableGripIcon = () => (
     <svg width="16" height="16" viewBox="0 0 16 16">
@@ -93,7 +89,7 @@ const DraggableGripIcon = () => (
 /**
  * A button link to add a new answer.
  */
-const AddAnswer = ({onClick}: AddAnswerProps) => (
+const AddAnswer: React.FC<AddAnswerProps> = ({onClick}): React.ReactElement => (
     <Link
         className={css(styles.addAnswer, editorStyles.addAnswer)}
         onClick={onClick}
@@ -109,7 +105,11 @@ const AddAnswer = ({onClick}: AddAnswerProps) => (
  *
  * TODO(michaelpolyak): Implement answer reordering, CP-117
  */
-const Answer = ({answer, onChange, onRemove}: AnswerProps) => (
+const Answer: React.FC<AnswerProps> = ({
+    answer,
+    onChange,
+    onRemove,
+}): React.ReactElement => (
     <li className={css(styles.answer)}>
         <Link onClick={onRemove}>
             <Icon icon={removeIcon} size={24} color="#D92916" />
@@ -137,10 +137,10 @@ const Answer = ({answer, onChange, onRemove}: AnswerProps) => (
 /**
  * The list of choices, handles adding, removing and reording of answers.
  */
-const AnswerChoices = ({
+const AnswerChoices: React.FC<AnswerChoicesProps> = ({
     choices,
     onChange,
-}: AnswerChoicesProps): React.Element<"div"> => (
+}): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Answer Choices</div>
 

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

@@ -1,4 +1,3 @@
-// @flow
 /**
  * Controlled component to display and change widget options.
  */
@@ -7,28 +6,27 @@ import {globalStyles} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import Checkbox from "../../components/checkbox.jsx";
+import Checkbox from "../../components/checkbox";
 
 const {colors, typography} = globalStyles;
 
 type BehaviorProps = {
     // 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 widget options change.
-    onChange: (options: {|
-        multipleAnswers?: boolean,
-        hideChoicesFromInstructions?: boolean,
-    |}) => void,
-    ...
+    onChange: (options: {
+        multipleAnswers?: boolean;
+        hideChoicesFromInstructions?: boolean;
+    }) => void;
 };
 
-const Behavior = ({
+const Behavior: React.FC<BehaviorProps> = ({
     multipleAnswers,
     hideChoicesFromInstructions,
     onChange,
-}: BehaviorProps): React.Element<"div"> => (
+}): React.ReactElement => (
     <div>
         <div className={css(styles.title)}>Behavior</div>
 

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-unsafe */
-// @flow
 /**
  * Controlled editor image marker on the question image.
  *
@@ -11,34 +10,30 @@ import {globalConstants, globalStyles} from "@khanacademy/perseus";
 import {StyleSheet, css} from "aphrodite";
 import * as React from "react";
 
-import Option, {OptionGroup} from "../../components/dropdown-option.jsx";
-import FormWrappedTextField from "../../components/form-wrapped-text-field.jsx";
+import Option, {OptionGroup} from "../../components/dropdown-option";
+import FormWrappedTextField from "../../components/form-wrapped-text-field";
 
 import type {MarkerType} from "@khanacademy/perseus";
 
 const {colors, borderRadius} = globalStyles;
 
-type MarkerProps = {|
-    ...MarkerType,
-
+type MarkerProps = MarkerType & {
     // The list of possible answer choices.
-    choices: $ReadOnlyArray<string>,
-
+    choices: ReadonlyArray<string>;
     // Callback for when any of the marker props are changed.
-    onChange: (marker: MarkerType) => void,
-
+    onChange: (marker: MarkerType) => void;
     // Callback to remove marker from the question image.
-    onRemove: () => void,
-|};
+    onRemove: () => void;
+};
 
-type MarkerState = {|
+type MarkerState = {
     // Whether answer choices dropdown is shown, controlled by the user clicking
     // on the marker icon.
-    showDropdown: boolean,
-|};
+    showDropdown: boolean;
+};
 
 export default class Marker extends React.Component<MarkerProps, MarkerState> {
-    _marker: ?HTMLElement;
+    _marker: HTMLElement | null | undefined;
 
     constructor(props: MarkerProps) {
         super(props);
@@ -96,7 +91,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
             this.setState({showDropdown: !showDropdown});
         } else if (showDropdown) {
             // Close dropdown if click event was registered anywhere outside it.
-            if (this._marker && !this._marker.contains((e.target: any))) {
+            if (this._marker && !this._marker.contains(e.target as any)) {
                 // Ensure other listeners are not triggered on click event that
                 // closes the dropdown. A specific case this addresses is when
                 // user clicks on question image to close dropdown, a new marker
@@ -108,7 +103,9 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         }
     };
 
-    handleLabelChange: (e: SyntheticInputEvent<>) => void = (e) => {
+    handleLabelChange: (e: React.ChangeEvent<HTMLInputElement>) => void = (
+        e,
+    ) => {
         this.updateMarker({label: e.target.value});
     };
 
@@ -126,7 +123,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
         this.updateMarker({answers});
     };
 
-    render(): React.Element<"div"> {
+    render(): React.ReactNode {
         const {answers, choices, label, onRemove, x, y} = this.props;
 
         const {showDropdown} = this.state;
@@ -166,6 +163,7 @@ export default class Marker extends React.Component<MarkerProps, MarkerState> {
                                 onSelected={this.handleSelectAnswer}
                                 // TODO(WB-1096): make selectedValues immutable in wonder-blocks
                                 // $FlowFixMe[incompatible-type]
+                                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                                 selectedValues={answers}
                             >
                                 {choices.map((choice) => (