@khanacademy/perseus 5.0.0 → 6.0.0

package/src/components/__tests__/sortable.test.tsx

@@ -4,7 +4,7 @@ import "@testing-library/jest-dom"; // Imports custom mathers
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import Sortable from "../sortable";
+import Sortable, {Layout} from "../sortable";
 
 describe("Sortable", () => {
     beforeEach(() => {
@@ -17,15 +17,53 @@ describe("Sortable", () => {
         // Arrange and Act
         const {container} = render(
             <Sortable
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
         // Assert
         expect(container).toMatchSnapshot("first render");
     });
+
+    it("renders a spinner while waiting for the TeX renderer to load", () => {
+        let simulateFakeTeXRendering = () => {};
+        function FakeTeX({
+            children,
+            onRender,
+        }: {
+            children: string;
+            onRender?: () => unknown;
+        }) {
+            simulateFakeTeXRendering = onRender || simulateFakeTeXRendering;
+            return <div className="fake-tex">{children}</div>;
+        }
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            TeX: FakeTeX,
+        });
+
+        // Act
+        const {container} = render(
+            <Sortable
+                waitForTexRendererToLoad={true}
+                layout={Layout.HORIZONTAL}
+                options={["a", "b", "c"]}
+            />,
+        );
+
+        // Assert
+        expect(container).toMatchSnapshot("first render: displays a spinner");
+
+        // Act
+        simulateFakeTeXRendering();
+
+        // Assert
+        expect(container).toMatchSnapshot(
+            "second render: displays the sortable",
+        );
+    });
 });
 
 describe("moveOptionToIndex", () => {
@@ -41,9 +79,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -64,9 +102,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -85,9 +123,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -106,9 +144,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -147,7 +185,7 @@ describe("Sortable.itemsFromProps", () => {
                 "height": 0,
                 "key": 0,
                 "option": "a",
-                "type": "static",
+                "state": "static",
                 "width": 0,
               },
               {
@@ -155,7 +193,7 @@ describe("Sortable.itemsFromProps", () => {
                 "height": 0,
                 "key": 1,
                 "option": "b",
-                "type": "static",
+                "state": "static",
                 "width": 0,
               },
               {
@@ -163,7 +201,7 @@ describe("Sortable.itemsFromProps", () => {
                 "height": 0,
                 "key": 2,
                 "option": "c",
-                "type": "static",
+                "state": "static",
                 "width": 0,
               },
             ]
@@ -182,7 +220,7 @@ describe("Sortable.itemsFromProps", () => {
 
         // Assert
         items.forEach((item) => {
-            expect(item.type).toBe("disabled");
+            expect(item.state).toBe("disabled");
         });
     });
     it("sets the item type to static if disabled is false", () => {
@@ -197,7 +235,7 @@ describe("Sortable.itemsFromProps", () => {
 
         // Assert
         items.forEach((item) => {
-            expect(item.type).toBe("static");
+            expect(item.state).toBe("static");
         });
     });
 });

package/src/components/__tests__/sorter.test.tsx

@@ -1,4 +1,3 @@
-import getRenderA11yString from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 import "@testing-library/jest-dom";
 
@@ -22,15 +21,19 @@ describe("sorter widget", () => {
 
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
             ...testDependencies,
-            getKaTeX: () => {
-                return Promise.resolve({});
+            TeX: ({
+                children,
+                // alias onRender to onLoad to quiet the overzealous testing-library linter
+                onRender: onLoad,
+            }: {
+                children: React.ReactNode;
+                onRender?: () => unknown;
+            }) => {
+                React.useLayoutEffect(() => {
+                    onLoad?.();
+                }, [onLoad]);
+                return <span className="tex-mock">{children}</span>;
             },
-            TeX: ({children}: {children: React.ReactNode}) => (
-                <span className="tex-mock">{children}</span>
-            ),
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Promise<any>' is not assignable to type '() => Promise<katexA11y>'.
-            getRenderA11yString: Promise.resolve(getRenderA11yString),
-            shouldUseFutureKaTeX: (flag: boolean) => {},
         });
     });
 

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>
         );
     }