@khanacademy/perseus 4.0.2 → 6.0.0

package/src/components/fixed-to-responsive.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 /**
  * A wrapper for a component that would otherwise have a fixed width and
  * height, that magically makes it reponsive while preserving its aspect ratio.
@@ -15,41 +14,47 @@
  * </FixedToResponsive>
  */
 import classNames from "classnames";
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import {negativePhoneMargin} from "../styles/constants";
 
 const MIN_VIEWPORT_HEIGHT = 480;
 
-const FixedToResponsive: any = createReactClass({
-    displayName: "FixedToResponsive",
-
-    propTypes: {
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-        className: PropTypes.string,
-        constrainHeight: PropTypes.bool,
-        allowFullBleed: PropTypes.bool,
-    },
-
-    getDefaultProps: function () {
-        return {
-            className: "",
-            constrainHeight: false,
-            allowFullBleed: false,
-        };
-    },
-
-    getInitialState: function () {
-        return {
-            viewportHeight: null,
-            viewportWidth: null,
-        };
-    },
-
-    componentDidMount: function () {
+type Props = {
+    width: number;
+    height: number;
+    children: React.ReactNode;
+    className?: string;
+    constrainHeight?: boolean;
+    allowFullBleed?: boolean;
+};
+
+type DefaultProps = {
+    className: Props["className"];
+    constrainHeight: Props["constrainHeight"];
+    allowFullBleed: Props["allowFullBleed"];
+};
+
+type State = {
+    viewportHeight: number | null;
+    viewportWidth: number | null;
+};
+
+class FixedToResponsive extends React.Component<Props, State> {
+    _isMounted = false;
+
+    static defaultProps: DefaultProps = {
+        className: "",
+        constrainHeight: false,
+        allowFullBleed: false,
+    };
+
+    state: State = {
+        viewportHeight: null,
+        viewportWidth: null,
+    };
+
+    componentDidMount() {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
         this._isMounted = true;
@@ -70,13 +75,13 @@ const FixedToResponsive: any = createReactClass({
         } else {
             this._cacheViewportSize();
         }
-    },
+    }
 
-    componentWillUnmount: function () {
+    componentWillUnmount() {
         this._isMounted = false;
-    },
+    }
 
-    _cacheViewportSize: function () {
+    _cacheViewportSize: () => void = (): void => {
         if (this._isMounted) {
             this.setState({
                 viewportHeight: Math.max(
@@ -86,9 +91,9 @@ const FixedToResponsive: any = createReactClass({
                 viewportWidth: window.innerWidth,
             });
         }
-    },
+    };
 
-    render: function () {
+    render() {
         // The ideal behavior for responsified, fixed size child components is
         // that they shrink when they need to (while preserving aspect ratio)
         // but never grow larger than their original dimensions. We accomplish
@@ -158,7 +163,7 @@ const FixedToResponsive: any = createReactClass({
             );
         }
         return container;
-    },
-});
+    }
+}
 
 export default FixedToResponsive;

package/src/components/graph.tsx

@@ -1,10 +1,11 @@
-/* eslint-disable react/forbid-prop-types, react/no-unsafe, react/sort-comp */
+/* eslint-disable react/no-unsafe */
 import $ from "jquery";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
+import {Coord} from "../interactive2/types";
+import {PerseusImageBackground} from "../perseus-types";
 import {interactiveSizes} from "../styles/constants";
 import Util from "../util";
 import GraphUtils from "../util/graph-utils";
@@ -13,7 +14,7 @@ import SvgImage from "./svg-image";
 
 const defaultBackgroundImage = {
     url: null,
-} as const;
+};
 
 /* Style objects */
 const defaultInstructionsStyle = {
@@ -38,7 +39,46 @@ function numSteps(range: any, step: any) {
     return Math.floor((range[1] - range[0]) / step);
 }
 
-class Graph extends React.Component<any> {
+type Props = {
+    box: Readonly<[number, number]>;
+    labels: ReadonlyArray<string>;
+    range: Readonly<[Coord, Coord]>;
+    step: Readonly<[number, number]>;
+    gridStep: Readonly<[number, number]>;
+    snapStep: Readonly<[number, number]>;
+    markings: string;
+    backgroundImage: PerseusImageBackground;
+    showProtractor: boolean;
+    showRuler: boolean;
+    rulerLabel: string;
+    rulerTicks: number;
+    instructions?: string;
+    isMobile: boolean;
+
+    onGraphieUpdated?: (graphie: any) => void;
+    onClick?: (Coord) => void;
+    onMouseDown?: (Coord) => void;
+    onMouseUp?: (Coord) => void;
+    onMouseMove?: (Coord) => void;
+    setDrawingAreaAvailable?: (boolean) => void;
+};
+
+type DefaultProps = {
+    labels: Props["labels"];
+    range: Props["range"];
+    step: Props["step"];
+    gridStep: Props["gridStep"];
+    snapStep: Props["snapStep"];
+    markings: Props["markings"];
+    backgroundImage: Props["backgroundImage"];
+    showProtractor: Props["showProtractor"];
+    showRuler: Props["showRuler"];
+    rulerLabel: Props["rulerLabel"];
+    rulerTicks: Props["rulerTicks"];
+    isMobile: Props["isMobile"];
+};
+
+class Graph extends React.Component<Props> {
     protractor: any;
     ruler: any;
     _graphie: any;
@@ -47,29 +87,7 @@ class Graph extends React.Component<any> {
     // @ts-expect-error [FEI-5003] - TS2564 - Property '_shouldSetupGraphie' has no initializer and is not definitely assigned in the constructor.
     _shouldSetupGraphie: boolean;
 
-    static propTypes = {
-        box: PropTypes.array.isRequired,
-        labels: PropTypes.arrayOf(PropTypes.string),
-        range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-        step: PropTypes.arrayOf(PropTypes.number),
-        gridStep: PropTypes.arrayOf(PropTypes.number),
-        snapStep: PropTypes.arrayOf(PropTypes.number),
-        markings: PropTypes.string,
-        backgroundImage: PropTypes.shape({
-            url: PropTypes.string,
-        }),
-        showProtractor: PropTypes.bool,
-        showRuler: PropTypes.bool,
-        rulerLabel: PropTypes.string,
-        rulerTicks: PropTypes.number,
-        onGraphieUpdated: PropTypes.func,
-        instructions: PropTypes.string,
-        onClick: PropTypes.func,
-        setDrawingAreaAvailable: PropTypes.func,
-        isMobile: PropTypes.bool,
-    };
-
-    static defaultProps: any = {
+    static defaultProps: DefaultProps = {
         labels: ["x", "y"],
         range: [
             [-10, 10],
@@ -84,67 +102,13 @@ class Graph extends React.Component<any> {
         showRuler: false,
         rulerLabel: "",
         rulerTicks: 10,
-        instructions: null,
-        onGraphieUpdated: null,
-        onClick: null,
-        onMouseDown: null,
         isMobile: false,
     };
 
-    render(): React.ReactNode {
-        let image;
-        const imageData = this.props.backgroundImage;
-        if (imageData.url) {
-            const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
-            image = (
-                // @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-                <SvgImage
-                    src={imageData.url}
-                    width={imageData.width}
-                    height={imageData.height}
-                    scale={scale}
-                    responsive={false}
-                />
-            );
-        } else {
-            image = null;
-        }
-
-        return (
-            <div
-                className="graphie-container above-scratchpad"
-                style={{
-                    width: this.props.box[0],
-                    height: this.props.box[1],
-                }}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
-                onMouseOut={this.onMouseOut}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
-                onMouseOver={this.onMouseOver}
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onClick' does not exist on type 'Graph'.
-                onClick={this.onClick}
-            >
-                {image}
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div className="graphie" ref="graphieDiv" />
-            </div>
-        );
-    }
-
     componentDidMount() {
         this._setupGraphie(true);
     }
 
-    componentDidUpdate() {
-        // Only setupGraphie once per componentDidUpdate().
-        // See explanation in setupGraphie().
-        this._hasSetupGraphieThisUpdate = false;
-        if (this._shouldSetupGraphie) {
-            this._setupGraphie(false);
-            this._shouldSetupGraphie = false;
-        }
-    }
-
     UNSAFE_componentWillReceiveProps(nextProps: any) {
         const potentialChanges = [
             "labels",
@@ -166,6 +130,16 @@ class Graph extends React.Component<any> {
         });
     }
 
+    componentDidUpdate() {
+        // Only setupGraphie once per componentDidUpdate().
+        // See explanation in setupGraphie().
+        this._hasSetupGraphieThisUpdate = false;
+        if (this._shouldSetupGraphie) {
+            this._setupGraphie(false);
+            this._shouldSetupGraphie = false;
+        }
+    }
+
     /* Reset the graphie canvas to its initial state
      *
      * Use when re-rendering the parent component and you need a blank
@@ -412,6 +386,46 @@ class Graph extends React.Component<any> {
             "snapStep",
         );
     };
+
+    render(): React.ReactNode {
+        let image;
+        const imageData = this.props.backgroundImage;
+        if (imageData.url) {
+            const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
+            image = (
+                // @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
+                <SvgImage
+                    src={imageData.url}
+                    width={imageData.width}
+                    height={imageData.height}
+                    scale={scale}
+                    responsive={false}
+                />
+            );
+        } else {
+            image = null;
+        }
+
+        return (
+            <div
+                className="graphie-container above-scratchpad"
+                style={{
+                    width: this.props.box[0],
+                    height: this.props.box[1],
+                }}
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOut' does not exist on type 'Graph'.
+                onMouseOut={this.onMouseOut}
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onMouseOver' does not exist on type 'Graph'.
+                onMouseOver={this.onMouseOver}
+                // @ts-expect-error [FEI-5003] - TS2339 - Property 'onClick' does not exist on type 'Graph'.
+                onClick={this.onClick}
+            >
+                {image}
+                {/* eslint-disable-next-line react/no-string-refs */}
+                <div className="graphie" ref="graphieDiv" />
+            </div>
+        );
+    }
 }
 
 export default Graph;

package/src/components/graphie.tsx

@@ -1,5 +1,4 @@
 import $ from "jquery";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -12,34 +11,58 @@ import GraphUtils from "../util/graph-utils";
 import GraphieClasses from "./graphie-classes";
 import Movables from "./graphie-movables";
 
+import type {Coord} from "../interactive2/types";
+import type {Range, Size} from "../perseus-types";
+
 const GraphieMovable = GraphieClasses.GraphieMovable;
 
 const createGraphie = GraphUtils.createGraphie;
 const {deepEq, nestedMap} = Util;
 const {assert} = InteractiveUtil;
 
-type Props = any;
+type Props = {
+    addMouseLayer?: boolean;
+    box: Size;
+    range: [Coord, Coord];
+    ranges?: [Range, Range];
+    gridStep?: [number, number];
+    step?: [number, number];
+    scale?: [number, number];
+
+    isMobile?: boolean;
+    responsive?: boolean;
+
+    children?: React.ReactNode;
+
+    // TODO(LC-772) - type this prop!
+    options: any;
+
+    setDrawingAreaAvailable?: (boolean) => void;
+    setup: (
+        graphie: any,
+        options: {
+            range: [Coord, Coord];
+            scale: [number, number];
+        },
+    ) => void;
+
+    onClick?: (at: Coord) => void;
+    onMouseDown?: (at: Coord) => void;
+    onMouseMove?: (at: Coord) => void;
+    onMouseUp?: (at: Coord) => void;
+};
+
+type DefaultProps = {
+    range: Props["range"];
+    options: Props["options"];
+    responsive: Props["responsive"];
+    addMouseLayer: Props["addMouseLayer"];
+};
 
 class Graphie extends React.Component<Props> {
-    static propTypes = {
-        addMouseLayer: PropTypes.bool,
-        box: PropTypes.arrayOf(PropTypes.number).isRequired,
-        children: PropTypes.node,
-        isMobile: PropTypes.bool,
-        onClick: PropTypes.func,
-        onMouseDown: PropTypes.func,
-        onMouseMove: PropTypes.func,
-        onMouseUp: PropTypes.func,
-        options: PropTypes.shape({
-            snapStep: PropTypes.arrayOf(PropTypes.number),
-        }),
-        range: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number)),
-        responsive: PropTypes.bool,
-        setDrawingAreaAvailable: PropTypes.func,
-        setup: PropTypes.func.isRequired,
-    };
+    graphieDivRef = React.createRef<HTMLDivElement>();
 
-    static defaultProps: any = {
+    static defaultProps: DefaultProps = {
         range: [
             [-10, 10],
             [-10, 10],
@@ -102,21 +125,30 @@ class Graphie extends React.Component<Props> {
     };
 
     // bounds-checked range
-    _range: () => ReadonlyArray<[number, number]> = () => {
-        return _.map(this.props.range, (dimRange) => {
-            if (dimRange[0] >= dimRange[1]) {
+    _range: () => [Coord, Coord] = () => {
+        const boundsCheckRange = (range: Coord): Coord => {
+            if (range[0] >= range[1]) {
                 return [-10, 10];
             }
-            return dimRange;
-        });
+            return range;
+        };
+        return [
+            boundsCheckRange(this.props.range[0]),
+            boundsCheckRange(this.props.range[1]),
+        ];
     };
 
-    _box: () => ReadonlyArray<number> = () => {
-        return _.map(this.props.box, (pixelDim) => {
+    _box: () => Size = () => {
+        const ensureMinSize = (pixelDim: number): number => {
             // 340 = default size in the editor. exact value
             // is arbitrary; this is just a safety check.
             return pixelDim > 0 ? pixelDim : 340;
-        });
+        };
+
+        return [
+            ensureMinSize(this.props.box[0]),
+            ensureMinSize(this.props.box[1]),
+        ];
     };
 
     _scale: () => ReadonlyArray<number> = () => {
@@ -131,8 +163,7 @@ class Graphie extends React.Component<Props> {
     _setupGraphie: () => void = () => {
         this._removeMovables();
 
-        // eslint-disable-next-line react/no-string-refs
-        const graphieDiv = ReactDOM.findDOMNode(this.refs.graphieDiv);
+        const graphieDiv = ReactDOM.findDOMNode(this.graphieDivRef.current);
         // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. | TS2339 - Property 'empty' does not exist on type 'JQueryStatic'.
         $(graphieDiv).empty();
         // @ts-expect-error [FEI-5003] - TS2339 - Property '_graphie' does not exist on type 'Graphie'.
@@ -342,8 +373,7 @@ class Graphie extends React.Component<Props> {
     render(): React.ReactNode {
         return (
             <div className="graphie-container">
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div className="graphie" ref="graphieDiv" />
+                <div className="graphie" ref={this.graphieDivRef} />
             </div>
         );
     }

package/src/components/highlighting/highlightable-content.tsx

@@ -31,7 +31,7 @@ import type {
     DOMRange,
 } from "./types";
 
-type HighlightableContentProps = {
+type Props = {
     // The highlightable content itself. Highlights will be defined relative to
     // the content specified here.
     children?: React.ReactElement<any>;
@@ -57,21 +57,18 @@ type HighlightableContentProps = {
     serializedHighlights: SerializedHighlightSet;
 };
 
-type HighlightableContentState = {
+type State = {
     // A cached list of DOMRanges, each representing one of the content's
     // semantic words. Sorted in document order.
     wordRanges: ReadonlyArray<DOMRange>;
 };
 
-class HighlightableContent extends React.PureComponent<
-    HighlightableContentProps,
-    HighlightableContentState
-> {
+class HighlightableContent extends React.PureComponent<Props, State> {
     // References to the mounted container and content divs.
     _container: HTMLElement | null | undefined;
     _content: HTMLElement | null | undefined;
 
-    state: HighlightableContentState = {
+    state: State = {
         wordRanges: [],
     };
 

package/src/components/highlighting/ui/highlight-renderer.tsx

@@ -21,7 +21,7 @@ import {
 
 import type {DOMHighlight, Position, Rect, ZIndexes} from "./types";
 
-type HighlightRendererProps = {
+type Props = {
     // The DOMHighlight to render.
     highlight: DOMHighlight;
     // A unique key corresponding to the given `highlight`.
@@ -36,7 +36,7 @@ type HighlightRendererProps = {
     zIndexes: ZIndexes;
 };
 
-type HighlightRendererState = {
+type State = {
     // The set of rectangles that cover this highlight's content, relative to
     // the offset parent. This cache is updated on mount and on changes to
     // the `highlight` and `offsetParent` props.
@@ -50,17 +50,14 @@ type HighlightRendererState = {
     cachedHighlightRects: ReadonlyArray<Rect>;
 };
 
-class HighlightRenderer extends React.PureComponent<
-    HighlightRendererProps,
-    HighlightRendererState
-> {
-    state: HighlightRendererState = {
+class HighlightRenderer extends React.PureComponent<Props, State> {
+    state: State = {
         cachedHighlightRects: this._computeRects(this.props),
         // @ts-expect-error [FEI-5003] - TS2322 - Type '{ cachedHighlightRects: readonly Rect[]; tooltipIsHovered: boolean; }' is not assignable to type 'HighlightRendererState'.
         tooltipIsHovered: false,
     };
 
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         if (
             this.props.highlight !== nextProps.highlight ||
             this.props.offsetParent !== nextProps.offsetParent
@@ -76,7 +73,7 @@ class HighlightRenderer extends React.PureComponent<
      * coordinates relative to the offset parent. That way, we can use them
      * for CSS positioning.
      */
-    _computeRects(props: HighlightRendererProps): ReadonlyArray<Rect> {
+    _computeRects(props: Props): ReadonlyArray<Rect> {
         const {highlight, offsetParent} = props;
 
         // Get the set of rectangles that covers the range's text, relative to

package/src/components/highlighting/ui/highlight-set-renderer.tsx

@@ -15,7 +15,7 @@ import HighlightTooltip from "./highlight-tooltip";
 
 import type {DOMHighlightSet, Position, ZIndexes} from "./types";
 
-type HighlightSetRendererProps = {
+type Props = {
     // Whether the highlights are user-editable. If false, highlights are
     // read-only.
     editable: boolean;
@@ -33,7 +33,7 @@ type HighlightSetRendererProps = {
     // highlights below content.
     zIndexes: ZIndexes;
 };
-type HighlightSetRendererState = {
+type State = {
     // If the user is currently hovering over a highlight, this field contains
     // its key.
     hoveredHighlightKey: string | null | undefined;
@@ -42,11 +42,8 @@ type HighlightSetRendererState = {
     hoveringTooltipFor: string | null | undefined;
 };
 
-class HighlightSetRenderer extends React.PureComponent<
-    HighlightSetRendererProps,
-    HighlightSetRendererState
-> {
-    state: HighlightSetRendererState = {
+class HighlightSetRenderer extends React.PureComponent<Props, State> {
+    state: State = {
         hoveredHighlightKey: null,
         hoveringTooltipFor: null,
     };
@@ -60,7 +57,7 @@ class HighlightSetRenderer extends React.PureComponent<
         this._updateEditListeners(false, this.props.editable);
     }
 
-    UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this._updateEditListeners(this.props.editable, nextProps.editable);
 
         // If we were previously hovering over a highlight that has been

package/src/components/highlighting/ui/highlight-tooltip.tsx

@@ -23,7 +23,7 @@ import {getRelativeRect} from "./util";
 
 import type {Rect} from "./types";
 
-type HighlightTooltipProps = {
+type Props = {
     label: string;
     onClick: () => unknown;
     onMouseEnter?: () => unknown;
@@ -33,7 +33,7 @@ type HighlightTooltipProps = {
     offsetParent: Element;
 };
 
-class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
+class HighlightTooltip extends React.PureComponent<Props> {
     _getFocusRect(): Rect | null | undefined {
         const {focusNode, focusOffset, offsetParent} = this.props;
 

package/src/components/highlighting/ui/highlighting-ui.tsx

@@ -21,7 +21,7 @@ import SelectionTracker from "./selection-tracker";
 import type {TrackedSelection} from "./selection-tracker";
 import type {DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes} from "./types";
 
-type HighlightingUIProps = {
+type Props = {
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -49,7 +49,7 @@ type HighlightingUIProps = {
     zIndexes: ZIndexes;
 };
 
-class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+class HighlightingUI extends React.PureComponent<Props> {
     _handleAddHighlight(highlightToAdd: DOMHighlight) {
         this.props.onAddHighlight(highlightToAdd);